Skip to content

Instantly share code, notes, and snippets.

@richhauck

richhauck/accordion.html

Created November 9, 2021 03:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save richhauck/0660ec7845a591b23e3b89a795a8d298 to your computer and use it in GitHub Desktop.
Save richhauck/0660ec7845a591b23e3b89a795a8d298 to your computer and use it in GitHub Desktop.
Download ZIP
Simple accordion using a definition list
Raw
accordion.html
<!DOCTYPE html>
<html>
<head>
<title>Accordion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion dt {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 1em;
transition: 0.4s;
}
dt.active, .accordion dt:hover {
background-color: #ccc;
}
.accordion dt:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion dt.active:after {
content: "\2212";
}
.accordion dd {
padding: 0 1em;
margin: 0;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<h1>Accordion Using Definition List</h1>
<dl class="accordion">
<dt>Button 1</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</dd>
<dt>Button 2</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</dd>
<dt>Button 3</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</dd>
<dt>Button 4</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</dd>
</dl>
<script>
const acc = document.querySelectorAll('.accordion dt');
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment