PHP problems with vertical tab

The CMS Questions
1

hi all :slight_smile:

i’m new here, so please forgive me my rookie mistakes…

i built an vertical tab for my portfolio website based on the tutorial of w3schools:

Bildschirmfoto 2020-04-17 um 03.23.14
Bildschirmfoto 2020-04-17 um 03.23.141478×894 96.4 KB

so i changed the city names with the php code to my project titles
but when i reload the website, no tab is preselected and so all the content is shown…


<div class="container-fluid">
		<div class="row">
				

			
				<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 ?>
			
				
		</div>
	</div>

i think the problem is, that i once need only the first project title to which i give a defaultOpen id and then all the other project titles without the defaultOpen id.

But im not sure how to code such a php function in Kirby…

I hope you can help me with tis problem!

Thanks
Cian

2

Maybe you actually do not need defaultOpen id? As far as I can tell it is the active class which makes the tab visible.

To add the class only to the first item, you need somethink like this I think:

<?php foreach($page->children()->listed() as $project): ?>
					 	
<button class="tablinks <?php if($project->isFirst()): ?>active<?php endif; ?>" onclick="openCity(event, '(<?= $project->title() ?>)')"><?= $project->title() ?></button>
					
<?php endforeach ?>
3

Also, your ids contain potentially invalid characters (no spaces allowed, and I’m not so sure about the parenthesis, better remove them).

An id may only be once on a page, not multiple times, so the defaultOpen thing is not correct.

4

thank you very much for your fast reply! :slight_smile:

your mention with the active class makes absolutely sense and now the first item is preselected.
but still the content of every project is shown when i reload the site…
only if i click on one of the buttons it’s working.

maybe i have to get out the id also out of this part?

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

and @texnixe which parenthesis do you mean?

5

These around the id value and the onclick event:

onclick="openCity(event, '(<?= $project->title() ?>)')"

Also, better use <?= Str::slug($project->title() ?> in both instances to prevent issues with spaces etc. in the title.