当其中一个面板按手风琴打开时，关闭其他面板

Question

How to close all panel in the accordion when one of the panel opened? My panel Accordion is still open. The expectation is when i click the one of panel, other panel is automatically closed.

This is my HTML, CSS and JS

 $(".acitemx h3").click(function() { $header = $(this); $content = $header.next(); $content.slideToggle(500, function() { $(this).parent().toggleClass('current'); }); }); $('.acitemx').eq(0).addClass('.acitemx').find('.accx').css('display', 'block'); 

 /* accordion editing */ .accx { background: #FFF none repeat scroll 0% 0%; padding: 15px; display: none; } .acitemx { margin-bottom: 10px; box-shadow: 0px 0px 2px 0px rgb(189, 189, 189); } .acitemx h3 { cursor: pointer; background: #00ADEF none repeat scroll 0% 0% !important; color: #FFF !important; font-family: "roboto", sans-serif; font-weight: bold; padding: 8px 40px 8px 15px !important; position: relative; border-radius: 3px 3px 3px 3px; } /* end accordion editing */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordionx"> <div class="acitemx"> <h3>First Panel</h3> <div class="accx"> This is the content </div> </div> <div class="acitemx"> <h3>Second Panel</h3> <div class="accx"> This is the content </div> </div> <div class="acitemx"> <h3>Third Panel</h3> <div class="accx"> This is the content </div> </div> </div> 

This the JSFiddle link http://jsfiddle.net/bupd32rq/3/

Thanks for your help :)

Answer 1

You can use the slideUp() function after finding other siblings accx element.

$(this).parent().siblings().find('.accx').slideUp();

Not related to answer: $('.acitemx').eq(0).addClass('.acitemx').find('.accx').css('display', 'block'); Here addClass need not have . and there is no logic adding another class of same name as they already have the CSS properties set.

JSfiddle demo

Code snippet

 $(".acitemx h3").click(function() { $header = $(this); $content = $header.next(); $content.slideToggle(500, function() { $(this).parent().toggleClass('current'); }); $(this).parent().siblings().find('.accx').slideUp(); // Added code }); $('.acitemx').eq(0).find('.accx').css('display', 'block'); 

 /* accordion editing */ .accx { background: #FFF none repeat scroll 0% 0%; padding: 15px; display: none; } .acitemx { margin-bottom: 10px; box-shadow: 0px 0px 2px 0px rgb(189, 189, 189); } .acitemx h3 { cursor: pointer; background: #00ADEF none repeat scroll 0% 0% !important; color: #FFF !important; font-family: "roboto", sans-serif; font-weight: bold; padding: 8px 40px 8px 15px !important; position: relative; border-radius: 3px 3px 3px 3px; } /* end accordion editing */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordionx"> <div class="acitemx"> <h3>First Panel</h3> <div class="accx"> This is the content </div> </div> <div class="acitemx"> <h3>Second Panel</h3> <div class="accx"> This is the content </div> </div> <div class="acitemx"> <h3>Third Panel</h3> <div class="accx"> This is the content </div> </div> </div>