accordian

by Gaurav Katwal

HTML

<div id="ss_menu">
  <h3><b>Winning Ways</b></h3>
  <div class="ss_button">1990-1991</div>
  <div class="ss_content">1st NBA Title</div>
  <div class="ss_button">1990-1991</div>
  <div class="ss_content">1st NBA Title</div>
  <div class="ss_button">1990-1991</div>
  <div class="ss_content">1st NBA Title</div>
  <div class="ss_button">1990-1991</div>
  <div class="ss_content">1st NBA Title</div>
  <div class="ss_button">1990-1991</div>
  <div class="ss_content">1st NBA Title</div>
  <div class="ss_button">1990-1991</div>
  <div class="ss_content">1st NBA Title</div>
  <div class="ss_button">1990-1991</div>
  <div class="ss_content">1st NBA Title</div>
  <div class="ss_button">1990-1991</div>
  <div class="ss_content">1st NBA Title</div>
  </div>

CSS

body {
font-family: Arial, Helvetica, sans-serif;
}

#ss_menu h3{ 
color: white; 
}

#ss_menu { 
width: 200px; 
z-index:1
}

.ss_button { 
background-color: black;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
color: #FFFFFF;
    border-radius: 5px;

}

.ss_content {
background-color: #EFEFEF;
display: none;
padding: 10px;
    border-radius: 5px;

}

JavaScript

jQuery('.ss_button').on('click', function (event) {
     event.preventDefault();
    jQuery('.ss_content').slideUp('fast');
    jQuery(this).next('.ss_content').slideDown('fast');
});