Создаем блок-аккордеон на jquery. Данный функционал можно использовать в сложно структурированных страницах, FAQ, либо меню.
Верстка аккордеона
<div class="accordion-container"> <div class="set"><a>заголовок 1<i class="fa fa-plus"></i></a> <div class="cont"><p>Текст</p></div></div> <div class="set"><a>заголовок 2<i class="fa fa-plus"></i></a> <div class="cont"><p>Текст.</p></div></div> <div class="set"><a>Заголовок<i class="fa fa-plus"></i></a> <div class="cont"><p>Текст</p></div></div> </div>
CSS
/* Аккордеон */
.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: 12px 20px;
text-decoration: none;
color: #555;
cursor: pointer;
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 > p{
display: none;
}
.set > a.active{
background-color:#3399cc;
color: #fff;
}
.set > a.active i{
color: #fff;
}
.cont{
position:relative;
width: 100%;
height: auto;
background-color: #fff;
border-bottom: 1px solid #ddd;
display:none;
}
.cont p {
padding: 25px 20px !important;
margin: 0;
color: #333;
}
Script
// Аккордеон
$(document).ready(function() {
$(".set > a").on("click", function(){
if($(this).hasClass('active')){
$(this).removeClass("active");
$(this).siblings('.cont').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");
$('.cont').slideUp(200);
$(this).siblings('.cont').slideDown(200);
}
});
});
