单击关闭jQuery手风琴活动面板

Question

I'm using the Simple jQuery Accordion from CSS-Tricks, and I want to know how to make the active panel close on click of the dt link. The application I'm using it for is as a menu in a sidebar that cannot scroll vertically, so if the content of the panel is too large, it can push the other panels out of reach of the user.

Secondarily, I would like to be able to set the accordion to have all items expanded based on a media query. Can someone tell me if this would even be possible without major changes to the plugin?

Here is the jQuery:

(function($) {

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

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

})(jQuery);

And 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.</dd>

<dt><a href="">Panel 2</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>

<dt><a href="">Panel 3</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>

</dl>

And the CSS:

.accordion {
  margin: 50px;
}

.accordian dt, dd {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0; 
}

.accordian dt:last-of-type, .accordian dd:last-of-type {
  border-bottom: 1px solid black; 
}

.accordian a {
  display: block;
  color: black;
  font-weight: bold;
}

.accordian dd {
  border-top: 0; 
  font-size: 12px; 
}
.accordian dd:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

Answer 1

Check if the panel is open before you do anything, and then either close that one panel, or close the others and open the new panel.

(function($) {

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

  $('.accordion > dt > a').click(function() {
    var $targetPanel = $(this).parent().next();
      if ($targetPanel.is(':visible')) {
        $targetPanel.slideUp();
      } else {          
        allPanels.slideUp();
        $targetPanel.slideDown();
      }
    return false;
  });

})(jQuery);

Answer 2

(function($) {

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

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

})(jQuery);

I haven't test this yet, but makes more sense to me.