$(function() { $("a.link").on("click", function() { $self = $(this); if($self.hasClass("current")) { $self.next().slideUp(200) .end().removeClass("current"); } else { $self.addClass("current"); $('[id^="js_panel"]:visible').not($self.next()).slideUp(200); $self.next().slideDown(200); } }); });
<div class="accordion-panel"> <a href="#js_panel1" class="link">panel1</a> <div id="js_panel1"> <ul> <li>panel11</li> <li>panel12</li> <li>panel13</li> </ul> </div> <a href="#js_panel2" class="link">panel2</a> <div id="js_panel2"> <ul> <li>panel21</li> <li>panel22</li> <li>panel23</li> <li>panel24</li> </ul> </div> <a href="#js_panel3" class="link">panel3</a> <div id="js_panel3"> <ul> <li>panel31</li> <li>panel32</li> <li>panel33</li> </ul> </div> </div>
.accordion-panel { width: 10em; } .accordion-panel > .link { background-color: #3c3c3c; color: #f8f8f8; width: inherit; text-align: center; text-decoration: none; padding: .5em 0; display: block; &:hover { color: darken(#f8f8f8, 20%); } } .accordion-panel > div { display: none; width: inherit; } ul { list-style: none; margin: 0; padding: 0; text-align: center; } li { padding: .5em 0; }