Question

A while ago I used this simple function to hide/unhide divs‘:

$(document).ready(function() {
  $('#job_desc').hide();
  $('#slick-toggle').click(function() {
    $('#job_desc').toggle(400);
    return false;
  });
});

As you can see I’m just hiding the div with the id job_desc when the document is ready, also creating a function that toggles the state of the div when the user clicks on the link with the id slick-toggle.

Well the times change, now I’m generating the div‘s using a php loop like:

while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo '<div id="job_desc['.$row["id_exp"].']">'.$job_desc.'</div>'
}

At this point I’m stuck, I know I need to generate not only the div‘s dynamically but also the toggle buttons for every div.

I really don’t know how to:

1. Change my jquery function in order to work with dynamically generated div‘s
2. How to hide all the div‘s when document ready.

Answer 1

You can easily do that by using classes (this is untested but should work):

while($row = mysql_fetch_assoc($result))
{
  echo '<div id="job_desc'.$row['id_exp'].'" class="hidable">'.$job_desc.'</div>';
}

Jquery:

$(document).ready(function() {
   $('.hidable').hide();
   $('.hidable').click(function() {
    var the_id = $(this).attr('id');
   $('#'+the_id).toggle(400);
  });
});

EDIT:

As I said in my comment, I didn’t see the part where you say you want a link tag to toggle the hide/unhide. If it is necessary for your design, you can easily implement the same mechanism and just add a return:false; or event.preventDefault() to avoid the browser following the link; anyway, just give it a class and a (unique) ID, and fetch the latter using the former.

I spent some minuts thinking to a solution but maybe I don’t understan what you really want. A single that hides/unhides all divs?

$('.hidable').hide();
$('a#slick-toggle').click(function(){
  $('.hidable').toggle(400);
  return false;
}

Or do you want a different link for each div?

UPDATED:

Not the most elegant solution, but should work:

while($row = mysql_fetch_assoc($result))
{
  echo '<div id="job_desc'.$row['id_exp'].'" class="hidable">'.$job_desc.'<a class="slick-toggle" href="desc'.$row['id_exp'].'">toggle</a></div>';
}

Jquery:

$(document).ready(function() {
    $('.hidable').hide(); // hides all divs;
    $('a.slick-toggle').click(function(){
      var the_id = $(this).attr('href');  //gets href
      var div_id = $('#job_' + the_id);  //takes the div id, which is made up with the href
      $(div_id).toggle(400);  //now can match the div
      return false;
    }
});