Can I add a number to the id of a div in foreach?

The CMS Questions
1

Hello. I want the title on the bottom right of the site “https://yunihwang.com/” to display a description when you click on it, but it doesn’t work because the id of the div is always the same in my code. Any suggestions? :nauseated_face::nauseated_face::nauseated_face:

<?php snippet('header') ?>

<?php foreach ($pages->listed() as $p): ?>
    <div class="slideshow">
        <div class="slideshow-box">
            <div class="slideshow-holder">
                <?php foreach ($p->images() as $workimage): ?>
                    <div class="slide" id="<?= $p->classname() ?>">
                        <?= $workimage ?><br><br>
                    </div>
                <?php endforeach ?>
            </div>
            <div class="tooltip">
                <p id="myText"><?= $p->worktitle() ?></p>
            </div>
            <div class="toolbox" id="myDIV">
                <?= $p->description() ?>
            </div>
        </div>

        <div class="actions">
            <span>1/3</span>
        </div>

        <a href="#" class="prev">←</a>
        <a href="#" class="next">→</a>
    </div>
<?php endforeach ?>

<script>
    var yeseys = document.getElementById('drof');
    var asd = document.getElementById('myDropdown');

    asd.style.display = 'none';

    yeseys.onclick = function () {
        if (asd.style.display !== 'none') {
            asd.style.display = 'none';
        } else {
            asd.style.display = 'block';
        }
    };

    var button = document.getElementById('myText');
    var div = document.getElementById('myDIV');

    div.style.display = 'none';

    button.onclick = function () {
        if (div.style.display !== 'none') {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    };
</script>

<?php snippet('footer') ?>
2

You can add a number by adding $p->indexOf($pages->listed()), but I think it would make more sense to use a class name instead.

3

Right now, this code does nothing when I do a foreach. … Can I add an incremental number or something after “myDiv” and “myText”…?

4

You need to post your code that does nothing. The code I posted above is supposed to add an incremental number.

<?php foreach ($pages->listed() as $p) {
  echo $p->indexOf($pages->listed());
} ?>

Will output all index numbers of the pages in the loop starting at 0.

5

Thanks… but when I modify it like that, it says “syntax error, unexpected token “endforeach”, expecting end of file”. What should I fix?..

6

I can only repeat that…

7

should i change also… “<?php endforeach ?>”…?

8

Please just post the code you tried. Otherwise I’m sorry but I can’t help you anymore

9 
<?php snippet('header') ?>

<?php foreach ($pages->listed() as $p) {
  echo $p->indexOf($pages->listed());
} ?>
    <div class="slideshow">
        <div class="slideshow-box">
            <div class="slideshow-holder">
                <?php foreach ($p->images() as $workimage): ?>
                    <div class="slide" id="<?= $p->classname() ?>">
                        <?= $workimage->resize(null, 800) ?><br><br>
                    </div>
                <?php endforeach ?>
            </div>
            <div class="tooltip">
                <p id="myText"><?= $p->worktitle() ?></p>
            </div>
            <div class="toolbox" id="myDIV">
                <?= $p->description() ?>
            </div>
        </div>

        <div class="actions">
            <span>1/3</span>
        </div>

        <a href="#" class="prev">←</a>
        <a href="#" class="next">→</a>
    </div>
<?php endforeach ?>

<script>
    var yeseys = document.getElementById('drof');
    var asd = document.getElementById('myDropdown');

    asd.style.display = 'none';

    yeseys.onclick = function () {
        if (asd.style.display !== 'none') {
            asd.style.display = 'none';
        } else {
            asd.style.display = 'block';
        }
    };

    var button = document.getElementById('myText');
    var div = document.getElementById('myDIV');

    div.style.display = 'none';

    button.onclick = function () {
        if (div.style.display !== 'none') {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    };
</script>

<?php snippet('footer') ?>

here… thanks… sorry…

10

You have to add this where you want to echo the number, not just right after starting the loop.

i.e

here

and

here

11

wow!!! thank you!!!