Trang chủ
Accordion UI
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="ac"> <div class="ct"> <header> <span class="tt">Accordion item #1</span> <span class="ic ip"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13 7C13 6.44772 12.5523 6 12 6C11.4477 6 11 6.44772 11 7V11H7C6.44772 11 6 11.4477 6 12C6 12.5523 6.44772 13 7 13H11V17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17V13H17C17.5523 13 18 12.5523 18 12C18 11.4477 17.5523 11 17 11H13V7Z" fill="currentColor" /> </svg> </span> <span class="ic im"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z" fill="currentColor" /> </svg> </span> </header> <p class="ds">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> <div class="ct"> <header> <span class="tt">Accordion item #2</span> <span class="ic ip"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13 7C13 6.44772 12.5523 6 12 6C11.4477 6 11 6.44772 11 7V11H7C6.44772 11 6 11.4477 6 12C6 12.5523 6.44772 13 7 13H11V17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17V13H17C17.5523 13 18 12.5523 18 12C18 11.4477 17.5523 11 17 11H13V7Z" fill="currentColor" /> </svg> </span> <span class="ic im"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z" fill="currentColor" /> </svg> </span> </header> <p class="ds">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> </div>
CSS
Copy
.ac { width: 100%; background: #fff; margin: 0 15px; padding: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1); } .ac .ct { margin: 10px 0; border: 1px solid #d1d5db; border-radius: 4px; overflow: hidden; } .ac .ct.open { padding-bottom: 10px; } .ac .ct header { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 15px; cursor: pointer; transition: .3s; } .ac .ct.open header { min-height: 35px; } .ac .tt { font-weight: 600; color: #333; } .ac .ip.hidden { display: none; } .ac .im { display: none; } .ac .im.active { display: block; } .ac .ds { height: 0; padding: 0 15px; font-size: 14px; line-height: 1.5; color: #333; font-weight: 400; transition: .3s; }
JS
Copy
const acs = document.querySelectorAll(".ac .ct"); acs.forEach((el, i) => { const p = el.querySelector(".ip"), m = el.querySelector(".im"), h = el.querySelector("header"); el.classList.remove("open"); h.onclick = () => { el.classList.toggle("open"); const d = el.querySelector(".ds"); if (el.classList.contains("open")) { d.style.height = `${d.scrollHeight}px`; p.classList.add("hidden"); m.classList.add("active"); } else { d.style.height = "0px"; p.classList.remove("hidden"); m.classList.remove("active"); } acs.forEach((e, j) => { if (i !== j) { e.classList.remove("open"); e.querySelector(".ds").style.height = "0px"; e.querySelector(".ip").classList.remove("hidden"); e.querySelector(".im").classList.remove("active"); } }); }; });