Hide/show div with javascript and while loop

Question

I am trying for hours now and for some reason i can't find a solution for my problem. The thing is, i need something like a div thats showing up when i click on an link. That's working so far.

But the main problem is, that i need it work within a while loop. So i can get the data dynamically into grid, but all of the php created links have the same id and all of the "to-show-divs" show up at the same time. so my question is how can i create dynamic ids or classes and how do i get them to work within javascript?

echo "<div class='grid grid-pad'>";
$db=mysql_query("SELECT * FROM work") or die (mysql_error());
while($var=mysql_fetch_array($db))
{         
    echo "<div class='col-1-3'>
              <div class='content'>
                  <div id='thumb' ><img alt='$var[id]' src='$var[thumb]'/></div>
                  <div class='menu' style='display: none;'>$var[link]</div>
              </div>
          </div>";
}

echo "</div>";

<script>
    $(document).ready(function() {
        $('#thumb').click(function() {
            $('.menu').slideToggle("fast");
        });
    });
</script>

can't you just do echo "<div id='" . $VAR . "[id]'>Some text to display</div>'"? This is assuming that the object [id] isn't part of the PHP variable. — pattmorter
– pattmorter, Commented Jul 30, 2014 at 15:08
you can assign the id of your work table to create the unique id for the link, this will create for instance a work1, work2, work3 and so on — martinezjc
– martinezjc, Commented Jul 30, 2014 at 15:10

Brad · Accepted Answer · 2014-07-30 15:11:19Z

4

You can do what the comment suggests or just make an iterator variable and concat that to the id like so:

$index = 0; 
while($var=mysql_fetch_array($db))
{         
    echo     "<div class='col-1-3' id='item_". $index ."'>
                <div class='content'>
                  <div id='thumb_". $index++ ."' >STUFF</div>
                   <div class='menu' style='display: none;'>$var[link]</div>
                 </div>
             </div>";
}

answered Jul 30, 2014 at 15:11

Brad

6,3927 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boris · Accepted Answer · 2014-07-30 15:13:09Z

3

Change <div id="thumb"> to <div class="thumb"> and then use following jQuery:

$('.thumb').click(function() {
  $(this).next('.menu').slideToggle("fast");
});

Otherwise you'll have multiple elements with the ID "thumb", which you shouldn't.

answered Jul 30, 2014 at 15:13

Boris

6096 silver badges20 bronze badges

Comments

krom · Accepted Answer · 2014-07-30 15:26:37Z

0

Since the DIV is right after the link, you can use the JQuery function next() to get the next node after the link, which is the DIV:

$(document).ready(function() {

    $('#thumb').on('click', function(e) {
        // prevent IE from actually executing the href of the link
        e.preventDefault();
        // get next node, call the toggle.
        $(this).next().slideToggle("fast"); 
        // prevent executing of the href of the link
        return false; 
    });

});

If you have more of these "thumb" links, please us a class instead of an ID - an ID has to be unique.

Edit: Realizing that there actually are no links but DIVs, you can skip the "prevent executing" stuff of course.

edited Jul 30, 2014 at 15:26

answered Jul 30, 2014 at 15:19

krom

1536 bronze badges

Collectives™ on Stack Overflow

Hide/show div with javascript and while loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related