CODEWITHSUNDEEP
javascriptphpjqueryhidden
TrapezeArtist
TrapezeArtist

Reputation: 907

Reveal Hidden Content When Using a While Loop

I am building a page which will have extra content revealed when the user clicks a button. That's fine I can do that with javascript or jQuery. Something like this.

<img id="doit" src="images/button_reddot.gif" width="125" height="22">
<script>
$( "img#doit" ).click(function() {
$( "#hiddenstuff" ).show( "slow" );
});
</script>
<table id="hiddenstuff" style="display:none" class="hotelform">
<tr class="hotelformborder">
<td>Extra content</td>
</tr>
</table>

My problem comes when I wrap that code in a PHP while loop to display versions of it multiple times. Regardless of which button I click, the hidden content is always revealed in the first rendering of the loop.

How do I make the hidden content show in the second rendering of the loop when I click the second button, etc?

SOLUTION

As Rory explained, the problem was the repeating use of ids. However using classes didn't quite work either as the hidden content was revealed in all renderings of the loop when just one button was clicked. This did set my brain running in a different direction though, so I set a $i variable and incremented it with each loop. Then the ids became

id="doit<?php echo $i ?>"

and

id="hiddenstuff<?php echo $i ?>"

Problem solved! Thanks to Rory and the others who contributed. StackOverflow is an amazing place.

Upvotes: 1

Views: 120

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because you are using id attributes in your loop resulting in multiple ids, but they must be unique. Try using classes instead:

<img class="doit" src="images/button_reddot.gif" width="125" height="22" />
<table class="hiddenstuff" style="display:none" class="hotelform">
    <tr class="hotelformborder">
        <td>Extra content</td>
    </tr>
</table>

You can also then place your <script /> in the <head /> as one function can control all elements created within the loop:

<script type="text/javascript">
    $(function() {
        $('img.doit').click(function() {
            $(this).next('.hiddenstuff').show('slow');
        });
    });
</script>

Upvotes: 1

Related Questions