Modified Accordion

by makloon

HTML

<div class="accordion-container"> 
  <div class="set" id="step1">
    <a class="top" href="#">
      Vestibulum 
    </a>
    
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
      <a class="btn" data-step="step2"> save </a>
    </div>
    
  </div>
  
  <div class="set" id="step2">
    <a class="top"href="#">
      Phasellus 
    </a>
    <div class="content">
      <p> Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum.</p>
      <a class="btn" data-step="step3"> save </a>
    </div>
  </div>
  
  <div class="set" id="step3">
    <a class="top" href="#">
      Praesent 
    </a>
    <div class="content">
      <p>Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
      <a class="btn" data-step="step4"> save </a>
    </div>
  </div>
  
  <div class="set" id="step4">
    <a class="top" href="#">
      Curabitur 
    </a>
    <div class="content">
      <p> Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. </p>
      <a class="btn" data-step="step5"> save </a>
    </div>
    
  </div>
</div>

CSS

body{
  background-color: #567;
  font-family: 'Open Sans', sans-serif;
}
.btn {
    padding: 10px;
    background-color: gray;
    margin: 0px 10px 10px;
    display: inline-block;
}
.last {
  background-color: purple !important;
}
.visited {
  background-color: orange;
}
.accordion-container{
  position: relative;
  width: 500px;
  height: auto;
  margin: 20px auto;
}
.accordion-container > h2{
  text-align: center;
  color: #fff;
  padding-bottom: 5px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;
}
.set{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
}
.set > a{
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #555;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  transition:all 0.2s linear;
}
.set > a i{
  position:relative;
  float: right;
  margin-top:4px;
  color: #666;
}
.set > a.active{
  background-color:#3399cc;
  color: #fff;
}
.set > a.active i{
  color: #fff;
}
.content{
  position:relative;
  width: 100%;
  height: auto;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display:none;
}
.content p{
  padding: 10px 15px;
  margin: 0;
  color: #333;
}

JavaScript

$(document).ready(function(){

$("div.set:not(:eq(0))").hide();
$('div.set').eq(0).children('.content').slideDown(200);
$('div.set').eq(0).children('.top').addClass('active');

  $(".top").on("click", function(){
    if ($(this).hasClass('active'))
    {
      $(this).removeClass("active");
      $(this).siblings('.content').slideUp(200);

    }else{

    $(".top").removeClass("active");
    $(this).addClass("active");
    $('.content').slideUp(200);
    $(this).siblings('.content').slideDown(200);
    }
  });
  
 $('.btn').on('click', function(){
 	var step = $(this).attr('data-step');
  if ($(this).hasClass('visited'))
  {
  	$(this).closest('.content').slideUp(200);
  	$(this).offsetParent().prev('.top').removeClass('active');
    
  } else {
  
  $(this).closest('.content').slideUp(200);
  $(this).offsetParent().prev('.top').removeClass('active');
  $("#" + step).show().find('.content').slideDown(200).prev().addClass('active');
  $(this).addClass('visited');
  }
  });
});