Vertical tabs with structure field

The CMS Questions
1

Hi,
Sorry if this is obvious but I’m not PHP expert and new to Kirby.

I would like to create a vertical tabs using Tabby Js.

This is the structure I’ve:

  <div class="vertical-tabs">

    <ul data-tabs>
      <?php foreach($page->tab()->toStructure() as $tab) : ?>
      <li><a href="#<?= $tab->tabId() ?>">
        <?= $tab->tabTitle() ?></a>
      </li>
      <?php endforeach ?>
    </ul>

    <div class="vertical-tabs-content">
      <?php foreach($page->tab()->toStructure() as $tab) : ?>
      <div id="<?= $tab->tabId() ?>">
        <?= $tab->tabDescription()->kirbytext() ?>
      </div>
      <?php endforeach ?>
    </div><!-- /vertical-tabs-content -->

  </div><!-- /vertical-tabs -->

This code works, but I need to insert the selected item width: data-tabby-default.

Thanks for the help.

2

You can either use a helper counter variable, or check the index of the tab and conditionally add that attribute.

1 Like
3

Thank you Sonja,

It works, but I’m not sure it’s 100% okay:

<div class="vertical-tabs">

  <ul data-tabs>
    <?php $count = 0; foreach($page->tab()->toStructure() as $tab) : ?>
    <li><a <?php if ($count % 20 == 0): ?> data-tabby-default <?php endif ?> href="#<?= $tab->tabId() ?>">
      <?= $tab->tabTitle() ?></a>
    </li>
    <?php $count++; endforeach ?>
  </ul>

  <div class="vertical-tabs-content">
    <?php foreach($page->tab()->toStructure() as $tab) : ?>
    <div id="<?= $tab->tabId() ?>">
      <?= $tab->tabDescription()->kirbytext() ?>
    </div>
    <?php endforeach ?>
  </div><!-- /vertical-tabs-content -->

</div><!-- /vertical-tabs -->
4

Replace with if ($count === 0)

1 Like
5

Nice, thank you :wink: