I can't get my jQuery accordion to collapse on click?

Question

I have this accordion set up so that when I click it, the panel opens. But I can't figure out how to make the panels close when it's clicked again? I'm not very jQuery savvy, so I tried a few things which didn't work. Please help?

The CSS

.accordion {
    margin: 50px;
}
.accordion dt, .accordion dd {
    padding: 10px;
    border-bottom: 0;
}
.accordion dt a, .accordion dd a {
    display: block;
    color: black;
    font-weight: bold;
}
.accordion dd {
    border-top: 0;
    font-size: 12px;
}
.accordion dd:last-of-type {
    border-top: 1px solid white;
    position: relative;
    top: -1px;
}

The HTML

<dl class="accordion">
  <dt><a href="">Panel 1</a></dt>
  <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
  <dt><a href="">Panel 2</a></dt>
  <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
  <dt><a href="">Panel 3</a></dt>
  <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
</dl>

JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script>
(function($) {

  var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);
</script>

Answer 1

One option is to keep track of the dt visibility. Check out the jQuery data object . It can help you store arbitrary data. http://jsfiddle.net/q22Lvukw/

(function($) {

  var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
    var dt = $(this).parent().next();
      if(dt.data('visible') == true){
       dt.slideUp();   
       dt.data('visible',false);
      }
      else{
          dt.slideDown();
          dt.data('visible',true);
      }
    return false;
  });

})(jQuery);

Answer 2

This is what you are looking for. You need to check to see if it is hidden first then that will decide whether or not it will slide down or slide up.

(function($) {
    var allPanels = $('.accordion > dd').hide();
    var tg = false;
    $('.accordion > dt > a').click(function() {
        if($(this).parent().next().is(":hidden"))
            tg = true;
        allPanels.slideUp();
        if(tg)
            $(this).parent().next().slideDown();
        tg = false;
        return false;
    });
});

JSFiddle

Answer 3

Try this: It basically checks for the panel height, if it is 0 (collapsed) it will open it up, if not it will do nothing. Here's a fiddle: http://jsfiddle.net/pu1yhngj/

(function($) {

 var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
      allPanels.slideUp();
      var panel = $(this).parent().next();
      if(panel[0].clientHeight == 0)  
          panel.slideDown();

      return false;
  });

})(jQuery);