1

Im new here, so forgive me if i make any mistakes...

I built an vertical tab for my portfolio website, based on the tutorial of w3school: https://www.w3schools.com/howto/howto_js_vertical_tabs.asp

So I changed the city names with php code referring to my project titles... but the problem is, that when i reload my page, no tab is preselected and so the content of all project is shown.

<div class="col-4 tab">
                <div class="fixed-top">


                    <?php foreach($page->children()->listed() as $project): ?>

                        <button class="tablinks" onclick="openCity(event, '(<?= $project->title() ?>)')" id="defaultOpen"><?= $project->title() ?></button>

                    <?php endforeach ?>

                </div>
            </div>


            <?php foreach($page->children()->listed() as $project): ?>

                <div class="col-8 tabcontent" id="(<?= $project->title() ?>)">
                    <h3><?= $project->title() ?></h3>
                </div>

            <?php endforeach ?>

I think the problem ist, that i have to select only the first project and put the defaultOpen id to it and then select all the other projects.

but im not sure how to code that in php...

i'd be very happy if you could help me and sorry for these very basic questions

thanks cian

cianjochem
  • 11
  • 1

1 Answers1

1

Pages in a collection have an isFirst() method you can use to check whether they are at the first position (Kirby docs).

If you only want the first child to have the defaultOpen id, you could use it like this:

<?php foreach($page->children()->listed() as $project): ?>
  <button
    <?= $project->isFirst() ? 'id="defaultOpen"' : '' ?>
    class="tablinks"
    onclick="openCity(event, '(<?= $project->title() ?>)')">
      <?= $project->title() ?>
  </button>
<?php endforeach ?>
silllli
  • 36
  • 5
  • By the way: another place to ask these questions (and find answers) is the Kirby forum https://forum.getkirby.com/ – silllli Apr 27 '20 at 11:34