Аккордеон для FAQ часто задаваемые вопросы (HTML, CSS и Javascript)

Красивый и полностью адаптивный аккордеон для блока сайта часто задаваемые вопросы (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'); } } }); }