<div class="accordion-wrapper">
<ul>
<li>
<h2 class="accordion-title">
Account Management
<button type="button" class="btn-close" href="" aria-label="Close first panel" title="Close first panel">
<svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m11 11h-7.25c-.414 0-.75.336-.75.75s.336.75.75.75h7.25v7.25c0 .414.336.75.75.75s.75-.336.75-.75v-7.25h7.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.25v-7.25c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" fill-rule="nonzero" />
</svg>
</button>
</h2>
<div class="accordion-content">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
<a href="">Button</a>
</div>
</div>
</li>
<li>
<h2 class="accordion-title">
Resources
<button type="button" class="btn-close" href="" aria-label="Close second panel" title="Close second panel">
<svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m11 11h-7.25c-.414 0-.75.336-.75.75s.336.75.75.75h7.25v7.25c0 .414.336.75.75.75s.75-.336.75-.75v-7.25h7.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.25v-7.25c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" fill-rule="nonzero" />
</svg>
</button>
</h2>
<div class="accordion-content">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
<a href="">Button</a>
</div>
</div>
</li>
<li>
<h2 class="accordion-title">
Strategy
<button type="button" class="btn-close" href="" aria-label="Close third panel" title="Close third panel">
<svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m11 11h-7.25c-.414 0-.75.336-.75.75s.336.75.75.75h7.25v7.25c0 .414.336.75.75.75s.75-.336.75-.75v-7.25h7.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.25v-7.25c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" fill-rule="nonzero" />
</svg>
</button>
</h2>
<div class="accordion-content">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
<a href="">Button</a>
</div>
</div>
</li>
<li>
<h2 class="accordion-title">
Shopping
<button type="button" class="btn-close" href="" aria-label="Close fourth panel" title="Close fourth panel">
<svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m11 11h-7.25c-.414 0-.75.336-.75.75s.336.75.75.75h7.25v7.25c0 .414.336.75.75.75s.75-.336.75-.75v-7.25h7.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.25v-7.25c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" fill-rule="nonzero" />
</svg>
</button>
</h2>
<div class="accordion-content">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
<a href="">Button</a>
</div>
</div>
</li>
</ul>
</div>
<footer class="page-footer">
<span>made by </span>
<a href="https://georgemartsoukos.com/" target="_blank">
<img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
</a>
</footer>
/* BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap");
:root {
--white: #fff;
--light-cyan: #edf6f9;
--button-bg-color: #ff6b6b;
--button-bg-hover-color: #ff5151;
--accordion-bg-color: #ffddd2;
--accordion-bg-hover-color: #ffd5c8;
--accordion-active-bg-color: #1982c4;
--accordion-radius: 50px;
}
* {
box-sizing: border-box;
}
body {
font: 20px/1.5 "Jost", sans-serif;
margin: 50px 0;
}
/* ACCORDION STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.accordion-wrapper {
max-width: 1000px;
padding: 0 20px;
margin: 0 auto;
}
.accordion-wrapper ul {
list-style: none;
padding: 0;
margin: 0;
}
.accordion-wrapper li {
padding: 0 20px 100px;
cursor: pointer;
border-top-left-radius: var(--accordion-radius);
border-top-right-radius: var(--accordion-radius);
background: var(--accordion-bg-color);
transition: all 0.2s ease-out;
}
.accordion-wrapper li:not(:first-child) {
margin-top: -100px;
border-top: 2px solid var(--light-cyan);
}
.accordion-wrapper li:nth-last-child(2),
.accordion-wrapper li:last-child {
border-bottom-left-radius: var(--accordion-radius);
border-bottom-right-radius: var(--accordion-radius);
}
.accordion-wrapper li:last-child {
padding-bottom: 0;
}
.accordion-wrapper li:hover {
background: var(--accordion-bg-hover-color);
}
.accordion-wrapper:not([data-multiple="true"]) li.active {
border-top-color: var(--accordion-active-bg-color);
}
.accordion-wrapper li.active {
cursor: default;
color: var(--white);
background: var(--accordion-active-bg-color);
}
.accordion-wrapper .accordion-title {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1.2;
padding: 40px 0;
margin: 0;
}
.accordion-wrapper .accordion-title button {
cursor: pointer;
background: none;
border: none;
}
.accordion-wrapper li svg {
transition: all 0.35s ease-out;
}
.accordion-wrapper li:not(.active) .accordion-content {
height: 0 !important;
}
.accordion-wrapper .accordion-content {
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.accordion-wrapper .inner {
padding-bottom: 40px;
}
.accordion-wrapper .inner a {
display: inline-block;
border-radius: 30px;
padding: 14px 20px;
text-decoration: none;
min-width: 120px;
line-height: 1;
text-align: center;
color: var(--white);
background: var(--button-bg-color);
transition: background 0.3s;
}
.accordion-wrapper .inner a:hover {
background: var(--button-bg-hover-color);
}
.accordion-wrapper .inner *:first-child {
margin-top: 0;
}
.accordion-wrapper li.active svg {
fill: var(--white);
transform: rotate(-45deg);
}
@media (min-width: 700px) {
.accordion-wrapper li {
padding-left: 60px;
padding-right: 60px;
}
.accordion-wrapper .inner {
max-width: 85%;
}
}
/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
position: fixed;
right: 0;
bottom: 50px;
display: flex;
align-items: center;
padding: 5px;
font-size: 0.75em;
background: var(--white);
}
.page-footer a {
display: flex;
margin-left: 4px;
}
const accordionWrapper = document.querySelector(".accordion-wrapper");
const items = accordionWrapper.querySelectorAll("li");
const activeItems = accordionWrapper.querySelectorAll("li.active");
const multiple_open = accordionWrapper.dataset.multiple;
const ACTIVE_CLASS = "active";
if (activeItems) {
activeItems.forEach(function (item) {
const content = item.querySelector(".accordion-content");
content.style.height = `${content.scrollHeight}px`;
});
}
items.forEach(function (item) {
item.addEventListener("click", function (e) {
const target = e.target;
if (
(target.tagName.toLowerCase() === "button" || target.closest("button")) &&
item.classList.contains(ACTIVE_CLASS)
) {
item.classList.remove(ACTIVE_CLASS);
return;
}
if (
"true" !== multiple_open &&
document.querySelector(".accordion-wrapper li.active")
) {
document
.querySelector(".accordion-wrapper li.active")
.classList.remove(ACTIVE_CLASS);
}
item.classList.add(ACTIVE_CLASS);
const content = item.querySelector(".accordion-content");
content.style.height = `${content.scrollHeight}px`;
});
});
This Pen doesn't use any external CSS resources.