Красивый и полностью адаптивный аккордеон для блока сайта часто задаваемые вопросы (FAQ).
Пример:
HTML КОД:
<div class="container">
<div class="wrapper">
<button class="toggle">
What is the return policy?
<i class="fas fa-plus icon"></i>
</button>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta aliquam facere adipisci quod mollitia, aut nemo deleniti fugiat et, corrupti sequi. Omnis dolorem quos eligendi placeat soluta sint corrupti quod.</p>
</div>
</div>
<div class="wrapper">
<button class="toggle">
How do I apply the coupon?
<i class="fas fa-plus icon"></i>
</button>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores error doloremque, quibusdam qui necessitatibus autem aperiam reprehenderit? Ipsum maiores dolore inventore ea. Accusantium fuga eius laboriosam iusto blanditiis doloremque ullam?</p>
</div>
</div>
<div class="wrapper">
<button class="toggle">
How do I become a member?
<i class="fas fa-plus icon"></i>
</button>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae consectetur officiis labore commodi sunt ex praesentium dolor magnam asperiores reiciendis. Minus magnam nesciunt aliquid eos ipsam sequi recusandae quos incidunt.</p>
</div>
</div>
</div>
CSS КОД:
.container{
width: 100%;
max-width: 830px;
padding: 0 15px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.wrapper{
background-color: #ffffff;
margin-bottom: 20px;
padding: 15px 40px;
border-radius: 5px;
box-shadow: 0 15px 25px rgba(0,0,50,0.2);
}
.toggle,
.content{
font-family: "Poppins",sans-serif;
}
.toggle{
width: 100%;
background-color: transparent;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16px;
color: #111130;
font-weight: 500;
border: none;
outline: none;
cursor: pointer;
padding: 15px 0;
}
.content{
position: relative;
font-size: 14px;
text-align: justify;
line-height: 30px;
height: 0;
overflow: hidden;
transition: all 1s;
}
JAVASCRIPT КОД:
let toggles = document.getElementsByClassName('toggle');
let contentDiv = document.getElementsByClassName('content');
let icons = document.getElementsByClassName('icon');
for(let i=0; i<toggles.length; i++){
toggles[i].addEventListener('click', ()=>{
if( parseInt(contentDiv[i].style.height) != contentDiv[i].scrollHeight){
contentDiv[i].style.height = contentDiv[i].scrollHeight + "px";
toggles[i].style.color = "#0084e9";
icons[i].classList.remove('fa-plus');
icons[i].classList.add('fa-minus');
}
else{
contentDiv[i].style.height = "0px";
toggles[i].style.color = "#111130";
icons[i].classList.remove('fa-minus');
icons[i].classList.add('fa-plus');
}
for(let j=0; j<contentDiv.length; j++){
if(j!==i){
contentDiv[j].style.height = "0px";
toggles[j].style.color = "#111130";
icons[j].classList.remove('fa-minus');
icons[j].classList.add('fa-plus');
}
}
});
}