1+ Accordion Components - Vanilla CSS

Accordions are a user-friendly way to present information in a compact and organized manner, making them ideal for websites with content that needs to be segmented or prioritized. With HTML and CSS, creating stylish and functional accordions is straightforward and doesn't require additional libraries or frameworks. In this collection, we've compiled a variety of HTML and CSS accordion designs that you can seamlessly incorporate into your website. Whether you're showcasing FAQs, product features, or service details, our collection offers options to enhance content organization and improve user experience. Let's explore how HTML and CSS accordions can help you effectively structure and present your website's content, making it more accessible and engaging for your audience!

Team Accordion Gallery

Highlight your team members with an accordion gallery layout. Learn how to create an interactive accordion-style gallery to showcase team members' profiles and achievements.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />


<ul class="accordion">
  <li>
    <img src="https://github.com/frontend-joe/css-accordions/blob/main/accordion-1/img1.jpg?raw=true" />
    <div class="content">
      <span>
        <h2>Carmen Rios</h2>
        <p>Frontend</p>
      </span>
    </div>
  </li>
  <li>
    <img src="https://github.com/frontend-joe/css-accordions/blob/main/accordion-1/img2.jpg?raw=true" />
    <div class="content">
      <span>
        <h2>Lisa Scott</h2>
        <p>Backend</p>
      </span>
    </div>
  </li>
  <li>
    <img src="https://github.com/frontend-joe/css-accordions/blob/main/accordion-1/img3.jpg?raw=true" />
    <div class="content">
      <span>
        <h2>Pavel Dvorak</h2>
        <p>Backend</p>
      </span>
    </div>
  </li>
  <li>
    <img src="https://github.com/frontend-joe/css-accordions/blob/main/accordion-1/img4.jpg?raw=true" />
    <div class="content">
      <span>
        <h2>Kelly Cox</h2>
        <p>Designer</p>
      </span>
    </div>
  </li>
</ul>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #3a3544;
  text-align: center;
  font-family: "Euclid Circular A", "Poppins";
}

.accordion {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 400px;
  gap: 16px;
  transition: 0.3s;
}

.accordion:hover {
  gap: 0;
}

.accordion li {
  position: relative;
  overflow: hidden;
  flex: 0 0 80px;
  border-radius: 50px;
  opacity: 0.75;
  cursor: pointer;
}

.accordion li img {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5);
}

.accordion li,
.accordion li img,
.accordion li .content,
.accordion li .content span {
  transition: 0.3s;
}

.accordion h2 {
  font-weight: 400;
  font-size: 24px;
  line-height: 45px;
  border-bottom: 2px solid #fff;
  margin-bottom: 10px;
  white-space: nowrap;
}

.accordion li .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: #fff;
  padding: 15px;
  background: #02022e;
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 70%) 10%,
    rgb(255 255 255 / 0%) 100%
  );
  opacity: 0;
  visibility: hidden;
}

.accordion li .content span {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 50px;
  translate: -300px 0;
  visibility: hidden;
  opacity: 0;
}

.accordion li:hover {
  flex: 0 1 260px;
  scale: 1.1;
  z-index: 10;
  opacity: 1;
}

.accordion li:hover .content {
  opacity: 1;
  visibility: visible;
}

.accordion li:hover span {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
}

```
No need of JavaScript
```

FAQ Accordion

Streamline user experience on your website with an accordion layout for FAQs. Learn how to implement an accordion-style FAQ section to efficiently organize and display frequently asked questions.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />



<article>
  <div>
    <header onClick="toggleItem(this)" class="active">
      <h2>What is HTML?</h2>
      <span class="material-symbols-outlined">expand_more</span>
    </header>
    <div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae
        quaerat atque eos, et recusandae quas voluptatem repellendus? Ullam,
        expedita? Sapiente molestias tenetur illo ex libero consectetur.
        Fugit labore similique temporibus.
      </p>
    </div>
  </div>
  <div>
    <header onClick="toggleItem(this)">
      <h2>What is CSS?</h2>
      <span class="material-symbols-outlined">expand_more</span>
    </header>
    <div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe
        consequatur nisi, itaque, voluptas quos, alias molestiae odio
        laboriosam incidunt rerum dicta dolorem minima repellat nostrum
        vitae! Repellat obcaecati sint cum!
      </p>
    </div>
  </div>
  <div>
    <header onClick="toggleItem(this)">
      <h2>What is JavaScript?</h2>
      <span class="material-symbols-outlined">expand_more</span>
    </header>
    <div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe
        consequatur nisi, itaque, voluptas quos, alias molestiae odio
        laboriosam incidunt rerum dicta dolorem minima repellat nostrum
        vitae! Repellat obcaecati sint cum!
      </p>
    </div>
  </div>
  <div>
    <header onClick="toggleItem(this)">
      <h2>What is ES6?</h2>
      <span class="material-symbols-outlined">expand_more</span>
    </header>
    <div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe
        consequatur nisi, itaque, voluptas quos, alias molestiae odio
        laboriosam incidunt rerum dicta dolorem minima repellat nostrum
        vitae! Repellat obcaecati sint cum!
      </p>
    </div>
  </div>
</article>

body {
  margin: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  color: rgb(255 255 255 / 90%);
  background: #606080;
  font-family: "Euclid Circular A", "Poppins";
}

article {
  background: #494964;
  width: 400px;
  padding: 20px;
  border-radius: 10px;
  display: grid;
  gap: 10px;
}

article header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 10px 0 20px;
  border-radius: 6px;
  cursor: pointer;
  background: #606080;
  color: #f8f8f8;
}

article header.active {
  background: #5c60ff;
}

article header.active span {
  rotate: -180deg;
}

article h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

article p {
  margin: 0;
  padding: 20px 10px;
  line-height: 1.7;
  font-size: 14px;
}

article span {
  transition: 0.3s;
}

article header ~ div {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}

const toggleItem = (element) => {
  const headers = document.querySelectorAll("article header");
  for (let header of headers) {
    header.classList.remove("active");
    header.nextElementSibling.style.height = "0px";
  }

  element.classList.add("active");

  const content = element.nextElementSibling;

  const text = content.querySelector("p");

  content.style.height = `${text.clientHeight}px`;
};