Skip to content

Instantly share code, notes, and snippets.

@hsnyc

hsnyc/accordion.html

Created October 21, 2020 20:05
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 hsnyc/63b4ca6c5342bb1a035312cd36634064 to your computer and use it in GitHub Desktop.
Save hsnyc/63b4ca6c5342bb1a035312cd36634064 to your computer and use it in GitHub Desktop.
Download ZIP
simple accordion
Raw
accordion.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion</title>
<!--
code source: https://www.w3schools.com/howto/howto_js_accordion.asp
with minor modifications
-->
<style>
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
display: flex;
align-items: center;
}
img {
margin-right: 20px;
border-radius: 100px;
flex-shrink: 0;
}
h5 {
font-size: 1.8em;
margin: 10px 0 4px;
}
span {
font-size: 1.2em;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
margin-left: auto;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
</style>
</head>
<body>
<button class="accordion">
<img src="https://via.placeholder.com/40.png/fff?text=icon" alt="">
<div class="heading-wrapper">
<h5>Heading Number 1</h5>
<span>Sub heading number 1</span>
</div>
</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex vero voluptatibus cupiditate impedit ipsum maxime non nam iure architecto ut voluptates eligendi sit minus, doloremque in ab perferendis quos! Quam maxime incidunt tempore necessitatibus veritatis ipsam. Eos odit dignissimos, corrupti obcaecati officia deleniti laudantium minus praesentium a quia ratione, tempora rem delectus ad odio voluptates vitae dolorum vero? Eveniet consectetur cupiditate id sint tempore saepe quos laudantium nihil, itaque asperiores deleniti commodi sunt libero in magni aliquam. Sed vel impedit facilis, iure rem nulla praesentium alias iusto tenetur illo. Quae pariatur eligendi totam beatae, quaerat quo. Culpa, doloremque deleniti?</p>
</div>
<button class="accordion">
<img src="https://via.placeholder.com/40.png/fff?text=icon" alt="">
<div class="heading-wrapper">
<h5>Heading Number 2</h5>
<span>Sub heading number 2</span>
</div>
</button>
<div class="panel">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, sint? Soluta iure doloribus repellat deleniti, reprehenderit nobis fuga accusantium pariatur, minus quia esse qui ex nostrum eveniet sint est expedita odio? Delectus necessitatibus voluptatum voluptatem rerum tempore magni obcaecati dignissimos. Consectetur natus magni laborum aperiam perferendis voluptatibus facilis mollitia? Temporibus.</p>
</div>
<button class="accordion">
<img src="https://via.placeholder.com/40.png/fff?text=icon" alt="">
<div class="heading-wrapper">
<h5>Heading Number 3</h5>
<span>Sub heading number 3</span>
</div>
</button>
<div class="panel">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam praesentium earum amet labore doloremque deleniti voluptatum obcaecati, id quam laudantium reiciendis omnis minus quisquam asperiores ipsum facere recusandae eveniet veritatis voluptatibus consequatur placeat corporis enim fugit nobis! Et, molestias! Sed, facere magnam? Quidem magni vero culpa veniam. Nesciunt iste quasi reiciendis eius numquam perferendis impedit inventore beatae molestiae sequi natus eveniet accusamus assumenda est, hic quo quia voluptas illo recusandae nam illum laudantium. Praesentium consequatur consequuntur modi nemo unde facere quibusdam quos, ratione enim quaerat illum quod temporibus odio perferendis sed reprehenderit, officiis sunt commodi accusamus eligendi impedit ut similique? Praesentium dolores natus, dolorum dolore eum reprehenderit. Cupiditate aspernatur iste cum nesciunt quaerat magnam pariatur, reprehenderit, porro, officia earum ipsum necessitatibus ullam ab molestiae. Delectus ipsum expedita ad maxime sunt libero temporibus dicta ducimus nam quos unde nesciunt repellat minus, maiores a impedit officia optio voluptates. Harum in, omnis deserunt necessitatibus libero ullam ad distinctio, vel perspiciatis pariatur magnam neque facilis? Dolores nostrum rerum eos, magni fugiat deserunt quaerat minima consequuntur optio, temporibus ea numquam eveniet. Eveniet nemo corporis quidem? Recusandae accusamus eius dolorem at repellendus unde! Doloribus, reprehenderit? Deleniti fuga quasi quod dicta aliquam distinctio quis repellendus, fugiat necessitatibus!</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var 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