Problems defining a good hide/unhide jQuery function for dynamic divs
<p>A while ago I used this simple function to hide/unhide <code>divs</code>':</p>

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

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

<p>Well the times change, now I'm generating the <code>div</code>'s using a php loop like:</p>

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

<p>At this point I'm stuck, I know I need to generate not only the <code>div</code>'s dynamically but also the <em>toggle</em> buttons for every <code>div</code>.</p>

<p>I really don't know how to:</p>

<ol>
<li>Change my jquery function in order to work with dynamically generated <code>div</code>'s</li>
<li>How to hide all the <code>div</code>'s when document ready.</li>
</ol>
