单击打开手风琴，单击第二次关闭手风琴

Question

I've made an accordion element from scratch with help from a tutorial (this is one of my first forays into jQuery), and the behavior I'd like is for accordion elements to open upon clicking, then, if open, close when clicked again. Here's what I've got:

jQuery

(function($) {

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

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

})(jQuery);

HTML

<dl class="accordion">
<dt><a href="">Question</a></dt>
<dd>Answer</dd>
<dl>

CSS

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

Also on jsFiddle here: https://jsfiddle.net/j1f341ku/

Currently, when you click an already-open element, it closes and re-opens. How can I make it so when an already-opened element is clicked, it closes and does not reopen? Thanks in advance!

(PS The suggestions I've found on here for similar problems typically provide solutions for accordions that are built differently.)

(PPS Long-time reader, first-time poster! Be gentle, sorry if I made any mistakes.)

Answer 1

I've updated your Fiddle:

try https://jsfiddle.net/j1f341ku/4/

(function ($) {

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

    $('.accordion > dt > a').click(function (e) {
        e.preventDefault();
        $allPanels.slideToggle(300);
    });

})(jQuery);

Here is an updated fiddle that should fix your bug (I added 3 questions in the fiddle as example): https://jsfiddle.net/j1f341ku/5/