Menutup State Aktif JQuery Akordion

by theqicux

HTML

<div id="accordion">
    <h2>Panel 1</h2>
    <div class="content">
        ....
    </div>
    <h2>Panel 2</h2>
    <div class="content">
        ....
    </div>
    <h2>Panel 3</h2>
    <div class="content">
        ....
    </div>
    <h2>Panel 4</h2>
    <div class="content">
        ....
    </div>
</div>

CSS

#accordion {
  width:90%;
  margin:10px auto;
  border:2px solid white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 }
 
 #accordion h2 {
  cursor:pointer;
  margin:0px 0px;
  padding:7px 15px;
  background-color:black;
  font:bold 11px Verdana,Arial,Sans-Serif;
  color:#e6e6e6;
  text-shadow:0px 1px 0px rgba(0,0,0,0.4);
 }
 
 #accordion .content {
  background-color:#ddd;
  padding:10px 15px;
  color:black;
  height:120px;    
 }
 
 #accordion h2.active {
  background-color:#4BB347;   
 }

JavaScript

$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        } else {
    $(this).removeClass('active').next().slideUp('slow');
}
    });
});