Hide/show toggle separate divs with the same class

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

Try this:

$(window).load(function() {

var $jobs = $('.job_description');
$('.grey_button a').click(function() {
    $closest = $(this).closest('li').find('.job_description');
    $jobs.not($closest).slideUp();
    $closest.slideDown();
    return false;
});

});

Answer 2

check out this jsfiddle example here.

for a glance of jquery fuction ...try :

$('.top').on('click', function() {
    $parent_box = $(this).closest('.box');
    $parent_box.siblings().find('.bottom').hide();
    $parent_box.find('.bottom').toggle();
});