Problems defining a good hide/unhide jQuery function for dynamic divs

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_e开发者_运维知识库xp"].']">'.$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.

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;
    }
});

I do the following to show / hide divs ....

I first use the following JS in all pages (ie linked to a single js file)

$('.togglelink').live('click',(function(event) {
        event.preventDefault();
        $('#' + $(this).attr('href')).toggle();
    })
);

I can break it down as follows :

$('.togglelink').live('click',(function(event) {

Any element that appears (.live) on my page with the class togglelink - perform the action in the function

event.preventDefault();

Stop the default - ie the browser following the link

$('#' + $(this).attr('href')).toggle();

toggle the div with the ID in the href attribute of the anchor......

To make this work I output the following HTML

<span class="toggleright"><a class="togglelink" href="showdetails">Show / Hide</a></span>
<span class="subheading">A Heading</span>
<div id="showdetails" style="display:none;">
Some content
</div>

I then use CSS to float the show / hide to the right of the page

Is there a reason for setting the ID of the div as an array? I would just set the ID to be something like

echo '<div id="job_desc_'.$row["id_exp"].'">'.$job_desc.'</div>';

The slick-toggle link to hide/show the div would need to be updated to call a function with the ID param for the appropriate div...or set with an attribute with the corresponding ID that you can grab when it's clicked to hide the right div.

$(document).ready(function() {
  $('div[id^="job_desc_"]').hide();
});

That will hide all divs with ids that start with job_desc_