need to hide/slide div once link is clicked

Question

I display the div by clicking the link, but now I want to hide it when it is clicked again.

This is what I have currently:

$(document).ready(function() {
    $('#our-future-intro-slide').click(function() {
      //$(".our-future-intro").delay(2400).slideDown(3600);
      $(".our-future-intro").slideDown(200);
    });
  });

So each time the user selects the link, it will either slide down and display the div, or slide up and disappear (or just disappear), depending on the current state.

UPDATE: I got it working, thanks to slideToggle, now I want to know if I can break this down to be less code.

I am setting slidetoggle to 4 different parts of the page, each div has its own id.

Here is the code:

$(document).ready(function() {
  $('#our-future-intro-slide').click(function() {
    //$(".our-future-intro").delay(2400).slideDown(3600);
    $(".our-future-intro").slideToggle(200);
  });
  $('#strategic-planning-click').click(function() {
    $("#strategic-planning").slideToggle(200);
  });
  $('#student-learning-click').click(function() {
    $("#student-learning").slideToggle(200);
  });
  $('#institutional-assessment-click').click(function() {
    $("#institutional-assessment").slideToggle(200);
  });
});

Any help is appreciated.

Answer 1

The answer is .slideToggle() :)

Answer 2

jQuery has a $(element).toggle(handler, handler) function that will help.

Answer 3

It can also be done through javascript and css.

<a href='#' onclick='functionname(".$auniquenumber.")'> your link</a>
 <div id="yourid_<?=$uniquenumber>" style="display:none">your content </div>

Definr the function like this:-

<script>
function functionname(uniquenumberpassed)
{
var anyvariable=document.getElementById("yourid"+uniquenumberpassed);
if(anyvariable.getStyle('display')=='none')
{
anyvariable.setStyle({display:'block'});
}
else
{
anyvariable.setStyle({display:'none'});
}
}
</script>