Children with foreach loop in second loop

The CMS Questions
1

I want a tabbar with different items and text for each children.

All children have a title and an image for the tab. The tab content comes from the children too.

It should look like that:

11
111108Ă—481 40.8 KB

What i already tried:

<div id="tabs" class="tabs">
    <nav>
        <ul class="grid">
            <?php foreach($data->children()->visible() as $child): ?>
            <li>
                <a href="#section">
                    <?php if($image = $child->image()): ?>
                        <img src="<?php echo $image->url() ?>" class="service-icon" />
                    <?php endif ?>
                    <h5 class="only-desktop"><?php echo $child->title()->html() ?></h5>
                </a>
            </li>
        </ul>
    </nav>
    <div class="inner card-tabs">
        <section id="section">
            <div class="mediabox">
                <?php
                $tabs = $child->text()->toStructure();
                foreach($tabs as $tab):
                echo $tab->text()->html();
                endforeach;
                ?>
            </div>
        </section>
    </div>
    <?php endforeach ?>
</div>

But it doesn’t work as expected. Each children is added at the bottom.

This is my code output where only the first item is correctly:

38
381023Ă—1201 71.4 KB

2

That’s probably a problem with your CSS, not with Kirby. Use your browser’s dev tools. to inspect your styles and where it goes wrong.

3

But the code is correct?

4

Your loop actually looks like it is creating wrong markup as well. Maybe. you can post what it should actually look like.

5

It should look like that:

<div id="tabs" class="tabs">
    <nav>
      <ul class="grid">
        <li>
          <a href="#section">
            <img src="assets/img/sapui5.svg" class="service-icon">
            <h5 class="only-desktop">SAP UI5</h5>
          </a>
        </li>
        <li>
          <a href="#section">
            <img src="assets/img/sap.svg" class="service-icon">
            <h5 class="only-desktop">SAP Leonardo</h5>
          </a>
        </li>
        <li>
          <a href="#section">
            <img src="assets/img/saphyb.svg" class="service-icon">
            <h5 class="only-desktop">SAP Hybris</h5>
          </a>
        </li>
        <li>
          <a href="#section">
            <img src="assets/img/saphana.svg" class="service-icon">
            <h5 class="only-desktop">SAP Hana Cloud</h5>
          </a>
        </li>
      </ul>
    </nav>
    <div class="inner card-tabs">
      <section id="section">
        <div class="mediabox">
          <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
        </div>
      </section>
      <section id="section">
        <div class="mediabox">
          <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
        </div>
      </section>
      <section id="section">
        <div class="mediabox">
          <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.</p>
        </div>
      </section>
      <section id="section">
        <div class="mediabox">
          <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
        </div>
      </section>
    </div>
  </div>
6

You. have to. repeat your loop. You need it. once for the li tags within. the nav, and then a second time for. the sections

<div id="tabs" class="tabs">
    <nav>
        <ul class="grid">
            <?php foreach($data->children()->visible() as $child): ?>
            <li>
                <a href="#section">
                    <?php if($image = $child->image()): ?>
                        <img src="<?php echo $image->url() ?>" class="service-icon" />
                    <?php endif ?>
                    <h5 class="only-desktop"><?php echo $child->title()->html() ?></h5>
                </a>
            </li>
           <?php endforeach ?>
        </ul>
    </nav>
    <div class="inner card-tabs">
         <?php foreach($data->children()->visible() as $child): ?>
        <section id="section">
            <div class="mediabox">
                <?php
                $tabs = $child->text()->toStructure();
                foreach($tabs as $tab):
                echo $tab->text()->html();
                endforeach;
                ?>
            </div>
        </section>
    <?php endforeach ?>
    </div>

</div>
1 Like
7

I already have the solution. Since I had probably a mistake :smiley:

Thank you!