Skip to content

Instantly share code, notes, and snippets.

@adamdehaven
Created October 26, 2020 17:47
Show Gist options
  • Save adamdehaven/84ac083238cf64c03baff404a4a33263 to your computer and use it in GitHub Desktop.
Save adamdehaven/84ac083238cf64c03baff404a4a33263 to your computer and use it in GitHub Desktop.
Expand & collapse
// Expand/collapse section
const toggleCollapse = (e) => {
const header = e.target;
const contentId = header.getAttribute("data-section");
if (contentId) {
const content = document.getElementById(contentId);
if (content.classList.contains("is-active")) {
content.style.maxHeight = "";
} else {
content.style.maxHeight = content.scrollHeight + 500 + "px"; // Add 500 to account for changing viewport size
}
content.classList.toggle("is-active");
header.classList.toggle("is-active");
header.setAttribute(
"aria-expanded",
header.classList.contains("is-active") ? "true" : "false"
);
}
};
const expandLinks = document.querySelectorAll(".expand-section-link");
expandLinks.forEach((h) => {
h.addEventListener("click", toggleCollapse);
});
html {
font-size: 16px;
}
body {
color: #333;
background: #eee;
}
.container {
max-width: 600px;
margin: 2rem auto 0;
padding: 20px;
}
.box {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0.5em 1em -0.125em rgba(#000, 0.1),
0 0px 0 1px rgba(#000, 0.02);
color: #333;
display: block;
margin-bottom: 1rem;
padding: 1.5rem;
&:last-of-type {
margin-bottom: 0;
}
}
p {
margin-bottom: 1rem;
&:last-of-type {
margin-bottom: 0;
}
}
// Expand element(s)
.expand-section-link {
color: #000;
max-width: 100%;
position: relative;
margin-bottom: 0;
padding-right: 2rem;
font-weight: 600;
cursor: pointer;
@media (min-width: 769px) {
padding-top: 0;
}
&::after {
border: 3px solid #000;
border-radius: 2px;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: 0.625em;
margin-top: -0.4375em;
pointer-events: none;
position: absolute;
top: 50%;
transform: rotate(-45deg);
transform-origin: center;
width: 0.625em;
right: 0;
z-index: 4;
transition: transform 0.2s ease-in-out;
}
&.is-active {
color: #007ac1;
// rotate arrow
&::after {
border-color: #007ac1;
transform: rotate(135deg);
top: 60%;
}
}
}
.expand-section {
max-height: 0;
overflow-y: hidden;
transition: max-height 0.2s ease-in-out;
&.is-active {
max-height: none;
transition: max-height 0.2s ease-in-out;
}
}
<div class="container">
<div class="box">
<div class="expand-section-link" data-section="section-1" aria-expanded="false">
This is the clickable section header
</div>
<div id="section-1" class="expand-section">
<div class="expand-content">
<p>This is the content.</p>
</div>
</div>
</div>
<div class="box">
<div class="expand-section-link" data-section="section-2" aria-expanded="false">
This is the clickable section header
</div>
<div id="section-2" class="expand-section">
<div class="expand-content">
<p>This is the content.</p>
</div>
</div>
</div>
<div class="box">
<div class="expand-section-link" data-section="section-3" aria-expanded="false">
This is the clickable section header
</div>
<div id="section-3" class="expand-section">
<div class="expand-content">
<p>This is the content.</p>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment