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_