Hide/show toggle separate divs with the same class name

Question

I've got a UL list, each LI has a hidden DIV, and a "More info" link that shows the hidden DIV. However, clicking this button shows all the other LI's hidden DIVs as well.

How can I only hide/show the DIV in the LI, and not have all the other hidden DIV's show?

And if I click on one how can I hide the others? I'd like to keep this part separate though in case I want to remove it later.

Also on click I want the text in the "More info" link to change to "Hide".

Here's my current script:

$(window).load(function() {

$('.grey_button a').toggle(function() {
    $('.job_description').slideDown('');
    return false;
  },
    function() {
      $('.job_description').slideUp('');
    return false;
  });

});

Answer 1

The following jQuery should work:

$('.grey_button a').toggle(function() {
    $(this).closest('li').find('.job_description').slideDown();
    return false;
  },
    function() {
      $(this).closest('li').find('.job_description').slideUp();
    return false;
  });

This assumes HTML similar to the following:

<ul>
    <li><span class="grey_button"><a href="#">Show more information</a></span>
        <div class="job_description">Job information...</div></li>
    <!-- other list items... -->
</ul>

JS Fiddle demo.

Incidentally, there's no need to pass an empty string to slideUp()/slideDown(), without an argument being passed (either an integer (number in millisecons), or a string) a default value will be used instead, of 400 milliseconds.

References:

• closest().
• find().