.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;  
}

<div class="accordion-container">  
  <div class="set">  
  <a href="#">  
  Первая вкадка  
  <i class="fa fa-plus"></i>  
  </a>  
  <div class="content">  
  <p>Содержимое 1 вкладки</p>  
  </div>  
  </div>  
  <div class="set">  
  <a href="#">  
  Вторая вкладка  
  <i class="fa fa-plus"></i>  
  </a>  
  <div class="content">  
  <p>Содержимое 2 вкладки</p>  
  </div>  
  </div>  
  <div class="set">  
  <a href="#">  
  Третья вкладка  
  <i class="fa fa-plus"></i>  
  </a>  
  <div class="content">  
  <p>Содержимое 3 вкладки</p>  
  </div>  
  </div>  
  <div class="set">  
  <a href="#">  
  Четвертая вкладка  
  <i class="fa fa-plus"></i>  
  </a>  
  <div class="content">  
  <p>Содержимое 4 вкладки</p>  
  </div>  
  </div>  
</div>

<script>$(document).ready(function(){  
  $(".set > a").on("click", function(){  
  if($(this).hasClass('active')){  
  $(this).removeClass("active");  
  $(this).siblings('.content').slideUp(200);  
  $(".set > a i").removeClass("fa-minus").addClass("fa-plus");  
  }else{  
  $(".set > a i").removeClass("fa-minus").addClass("fa-plus");  
  $(this).find("i").removeClass("fa-plus").addClass("fa-minus");  
  $(".set > a").removeClass("active");  
  $(this).addClass("active");  
  $('.content').slideUp(200);  
  $(this).siblings('.content').slideDown(200);  
  }  
   
  });  
});</script>