9+ CSS Accordion Examples

This post contains a total of 9+ Hand-Picked CSS Accordion Examples with Source Code. All these Accordions are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Accordion Examples

1. By Anna Blok

Made by Anna Blok. Simple html and CSS Accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Mulish:[email protected]&display=swap" rel="stylesheet">

  
<style>
body, html {
   height: 100%;
}
body {
   font-family: 'Mulish', sans-serif;
   background: #222;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}
.nav {
   list-style-type: none;
   border-radius: 10px;
   background: #666;
   margin: 0;
   padding: 0;
   width: 300px;
   overflow: hidden;
}

.nav-item {
   font-size: 20px;
   background: #9701f0;
   border-bottom: 1px solid rgba(63, 46, 73, 0.3);
}

.nav-item:last-child {
   border-bottom: none;
}

.nav-link, .nav-submenu-link {
   text-decoration: none;
   padding: 16px 20px;
   display: block;
   color: #fff;
}

.nav-submenu {
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.5s;
   background: #3f2e49;
}
.nav-submenu:target {
   max-height: 10rem;
}
.nav-submenu-link {
   font-size: 16px;
   background: transparent;
   transition: background 0.2s ease-in;
}
.nav-submenu-link:hover {
   background: #36253f;
}
</style>
</head>
<body>
  <ul class="nav">
   
   <li class="nav-item">
      <a href="#profile" class="nav-link">Profile</a>
      <div id="profile" class="nav-submenu">
         <a href="#" class="nav-submenu-link">Posts</a>
         <a href="#" class="nav-submenu-link">Images</a>
      </div>
   </li>
   
   <li class="nav-item">
      <a href="#msg" class="nav-link">Messages</a>
      <div id="msg" class="nav-submenu">
         <a href="#" class="nav-submenu-link">New</a>
         <a href="#" class="nav-submenu-link">Sent</a>
      </div>
   </li>
   
   <li class="nav-item">
      <a href="#setting" class="nav-link">Settings</a>
      <div id="setting" class="nav-submenu">
         <a href="#" class="nav-submenu-link">Password</a>
         <a href="#" class="nav-submenu-link">Language</a>
      </div>
   </li>
   
   <li class="nav-item">
      <a href="#exit" class="nav-link">Exit</a>
   </li>
   
</ul>
</body>
</html>

2. By Ian

Made by Ian. Pure CSS Accordion with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>n</title>
  
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

* {
  margin: 0;
  font-family: Roboto, sans-serif;
}

body {
  padding: 24px;
}

.accordion-wrapper {
  display: block;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  max-width: 500px;
  margin: 0 auto;
  margin-top: 12px;
  margin-bottom: 12px;
}

.accordion + .title {
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: #1565C0;
}

.accordion ~ .title strong {
  line-height: 24px;
  color: white;
}

.accordion ~ .title .side-icon {
  display: block;
}

.accordion:checked ~ .title .side-icon {
  display: none;
}

.accordion ~ .title .down-icon {
  display: none;
}

.accordion:checked ~ .title .down-icon {
  display: block;
}

.accordion ~ .content {
  display: none;
  padding: 8px;
  cursor: pointer;
}

.accordion:checked ~ .content {
  display: block;
}
</style>
</head>
<body>
  <label class="accordion-wrapper">
  <input type="checkbox" class="accordion" hidden />
  <div class="title">
    <strong>Pure CSS Accordion</strong>
    <svg viewBox="0 0 256 512" width="12" title="angle-right" class="side-icon" fill="white">
      <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
    </svg>
    <svg viewBox="0 0 320 512" height="24" title="angle-down" class="down-icon" fill="white">
      <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" />
    </svg>
  </div>
  <div class="content">
    <p>Content</p>
  </div>
</label>
<label class="accordion-wrapper">
  <input type="checkbox" class="accordion" hidden />
  <div class="title">
    <strong>Accordion 2</strong>
    <svg viewBox="0 0 256 512" width="12" title="angle-right" class="side-icon" fill="white">
      <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
    </svg>
    <svg viewBox="0 0 320 512" height="24" title="angle-down" class="down-icon" fill="white">
      <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" />
    </svg>
  </div>
  <div class="content">
    <p>Content 2</p>
  </div>
</label>
<label class="accordion-wrapper">
  <input type="checkbox" class="accordion" hidden />
  <div class="title">
    <strong>Accordion 3</strong>
    <svg viewBox="0 0 256 512" width="12" title="angle-right" class="side-icon" fill="white">
      <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
    </svg>
    <svg viewBox="0 0 320 512" height="24" title="angle-down" class="down-icon" fill="white">
      <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" />
    </svg>
  </div>
  <div class="content">
    <p>Content 3</p>
  </div>
</label>
</body>
</html>

3. By TokyoWeb

Made by TokyoWeb. FAQ Accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
body {
  margin: 0;
}

.accordion-item-input:checked ~ .accordion-item-bd {
  max-height: 1000px;
  padding-top: 15px;
  margin-bottom: 15px;
  transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}

.accordion-item-input:checked ~ .accordion-item-hd > .accordion-item-hd-cta {
  transform: rotate(0);
}

.accordion-item-hd-cta {
  display: block;
  width: 30px;
  position: absolute;
  top: calc(50% - 6px );
  /*minus half font-size*/
  right: 0;
  pointer-events: none;
  transition: transform .3s ease;
  transform: rotate(-180deg);
  text-align: center;
  font-size: 12px;
  line-height: 1;
}

.accordion-item-bd {
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}

.accordion-item-input {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1;
  overflow: hidden;
  position: absolute;
  left: -9999px;
}

/* */

.preguntas-frecuentes {
  background: #dbe0e8;
	position: relative;
	width: 100%;
	z-index: 89;
	}

.preguntas-frecuentes-contenedor {
  margin: 0 auto;
	padding: 4rem 1.25rem 6rem;
	position: relative;
	overflow: hidden;
	width: 80%;
	max-width: 106.25rem;
}

.preguntas-frecuentes-encabezado-linea-roja {
  border-bottom: 2px #d60510 solid;
	margin: 15px auto 21px;
	width: 40px;
}

.preguntas-frecuentes h1 {
  text-align: center;
}

.preguntas {
  padding-top: 3.21rem;
}

.preguntas label {
  background: #fff;
	border-bottom: 1px solid #eee;
	border-radius: 8px;
  cursor: pointer;
  display: block;
	font-size: 1.1875rem;
	letter-spacing: -.0225rem;
	line-height: 1.36842;
	margin-bottom: 16px;
	padding: 20px 10px;
  position: relative;
	transition: all 0.35s ease;
}

.preguntas label:hover {
  background: #d60510;
	color: #fff;
	cursor: pointer;
}

.preguntas label::before {
  content: "\276f";
	font-size: 18px;
	float: left;
	line-height: 30px;
	margin: 0 15px 0 5px;
	transition: all 0.15s ease;
	color: #d60510;
}

.preguntas label:hover::before {
  color: #fff;
  opacity: 0.55;
  transform: rotate(90deg);
}

.preguntas-cerrar {
  cursor: pointer;
}

.preguntas label.cerrar::after {
  content: "\2715";
	float: right;
	font-size: 11px;
	font-weight: 300;
	line-height: 30px;
}

.preguntas label.cerrar::before {
  transform: rotate(-90deg);
}

.respuesta {
  background: #fff;
  line-height: 1.8em;
  margin-bottom: 25px;
  margin-top: -17px;
  border-top: 1px dashed #eee;
  border-radius: 11px
}

.respuesta p {
  margin: 0;
  padding: 25px 25px;
}

.respuesta-enlace-dotted {
  border-bottom: 1px dotted #000;
}

.texto-h3 {
  font-size: 1.21rem;
}

@media (min-width: 400px) {
  .texto-h3 {
    font-size: 1.59rem;
  }
}
	
@media (min-width: 768px) {
  .preguntas {
    padding-top: 5.21rem;
  }
  .preguntas label {
    font-size: 1.3125rem;
    letter-spacing: -.01875rem;
    line-height: 1.33333;
    padding: 20px;
  }
  .respuesta p {
    font-size: 1.21rem;
    letter-spacing: 0.021rem;
    line-height: 2.1;
    padding: 25px 50px;
  }
  .texto-h3 {
    font-size: 1.7rem;
  }
}

@media (min-width: 1000px) {
  .texto-h3 {
    font-size: 2.35rem;
  }
}
</style>
</head>
<body>
  <section class="preguntas-frecuentes clearfix">	
		<div class="preguntas-frecuentes-contenedor serif">
			
			<div class="preguntas-frecuentes-encabezado-linea-roja"></div>
			<h1 class="texto-h3">Text</h1>
      
      <div class="accordion css-accordion preguntas">
        
        <input class="accordion-item-input" type="checkbox" name="accordion" id="item1" /><label for="item1" class="accordion-item-hd">Accordion Heading 1<span class="accordion-item-hd-cta">&#9650;</span></label>
        <div class="accordion-item-bd respuesta"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.</p></div>
        
        <input class="accordion-item-input" type="checkbox" name="accordion" id="item2" /><label for="item2" class="accordion-item-hd">Accordion Heading 2<span class="accordion-item-hd-cta">&#9650;</span></label>
        <div class="accordion-item-bd respuesta"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.</p></div>
        
        <input class="accordion-item-input" type="checkbox" name="accordion" id="item3" />
        <label for="item3" class="accordion-item-hd">Accordion Heading 3<span class="accordion-item-hd-cta">&#9650;</span></label>
        <div class="accordion-item-bd respuesta"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.</p></div>
        
      </div>      
    </div>    
</section>
</body>
</html>

4. By Simto Alev

Made by Simto Alev. Accordion Content With Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
<style>
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700';

body {
	background: #ECF0F1;
	font-family: 'Source Sans Pro';
	font-weight: 400;
}

h1 {
	font-size: 35px;
	color: #2C97DE;
	text-align: center;
}

.accordionMenu {
	width: 500px;
	margin:0 auto;
}
.accordionMenu input[type=radio] {
	display: none;
}
.accordionMenu label {
	display: block;
	height: 50px;
	line-height: 47px;
	padding: 0 25px 0 10px;
	background: #2C97DE;
	font-size: 18px;
	color: #FFF;
	position: relative;
	cursor: pointer;
	border-bottom: 1px solid #e6e6e6;;
}
.accordionMenu label:after {
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	right: 10px;
	top: 20px;
	z-index: 10;
	transition: all 0.3s ease-in-out;
}

.accordionMenu .content {
	max-height: 0;
	height: 0;
	overflow: hidden;
		transition: all 2s ease-in-out;
	
}
.accordionMenu .content .inner {
	font-size: 1.2rem;
  color: #2C97DE;
	line-height: 1.5;
	background: white;
	padding: 20px 10px;
}

.accordionMenu input[type=radio]:checked + label:after {
	transform: rotate(90deg);
}

.accordionMenu input[type=radio]:checked + label + .content {
	max-height: 2000px;
	height: auto;
	 
}
</style>
</head>
<body>
  <h1>Pure CSS Accordion Menu</h1>

<div class="accordionMenu">
	<input type="radio" name="trg1" id="acc1" checked="checked">
	<label for="acc1">Quisquam dolorem eos</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolorem autem sit accusamus quis minima voluptatibus, ex placeat corporis explicabo perspiciatis deserunt voluptate a voluptas molestiae magni eligendi natus corrupti.</div>
	</div>

	<input type="radio" name="trg1" id="acc2">
	<label for="acc2">Fugiat esse odit animi</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cupiditate libero veritatis inventore hic repellendus maiores temporibus, animi eligendi incidunt, aut, similique at. Vitae cumque, iste facilis, adipisci esse quia.</div>
	</div>

	<input type="radio" name="trg1" id="acc3">
	<label for="acc3">Quibusdam adipisci</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam eaque temporibus tempora ullam ducimus totam veniam voluptatibus saepe officia inventore numquam, autem repudiandae neque debitis nulla odio dolores vero.</div>
	</div>

	<input type="radio" name="trg1" id="acc4">
	<label for="acc4">Harum animi placeat</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A similique inventore qui atque reprehenderit repudiandae expedita voluptatum aliquam corporis, quod delectus, rerum doloribus in maiores facere quo culpa, debitis mollitia.</div>
	</div>

	<input type="radio" name="trg1" id="acc5">
	<label for="acc5">Obcaecati quibusdam conse</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores nobis distinctio expedita id fuga enim accusantium error libero similique non autem quis voluptate, voluptas, porro perferendis, adipisci ipsam laudantium in!</div>
	</div>

	<input type="radio" name="trg1" id="acc6">
	<label for="acc6">Modi excepturi</label>
	<div class="content">
		<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis laborum modi velit eum a impedit inventore molestias repellendus illum, cum voluptatum harum quaerat sed, cumque sit officia molestiae autem voluptatibus.</div>
	</div>
</div>
</body>
</html>
 

5. By Matt Couchman

Made by Matt Couchman. Basic CSS Accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
.accordion__item__title {
  display: block;
  padding: 20px;
  cursor: pointer;
  background: #eee;
  color: #333;
  position: relative;
}
.accordion__item__title:after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  font-size: 2rem;
  line-height: 2rem;
  margin-top: -1rem;
  font-weight: bold;
}
.accordion__item:nth-of-type(2n) .accordion__item__title {
  background: #ddd;
}
.accordion__item__content {
  display: none;
  padding: 20px;
}
.accordion__item__content:target {
  display: block;
}

/* Irrelevant styles */
* {
  box-sizing: border-box;
}

body {
  font-family: Lato, sans-serif;
}

a {
  text-decoration: none;
  color: #27ae60;
}

.container {
  max-width: 600px;
  margin: 20px auto;
}

h1 {
  font-family: Montserrat, sans-serif;
  background: #27ae60;
  color: #fff;
  margin: 0;
  padding: 60px 20px;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
}
</style>
</head>
<body>
  <!-- Irrelevant markup -->
<h1>Pure CSS accordion</h1>
<div class="container">
  <p>A very basic implementation of a pure CSS accordion.</p>
  <p>Makes use of the <code>:target</code> pseudo-class to hide and show accordion items.</p>
  <div class="accordion">
    <div class="accordion__item">
      <a class="accordion__item__title" href="#item1">
        Click this thing!
      </a>
      <div class="accordion__item__content" id="item1">
        Here's some more text. Woop woop!
      </div>
    </div>
    <div class="accordion__item">
      <a class="accordion__item__title" href="#item2">
        This one too!
      </a>
      <div class="accordion__item__content" id="item2">
        Here's some more text. Woop woop!
      </div>
    </div>
    <div class="accordion__item">
      <a class="accordion__item__title" href="#item3">
        And this one...
      </a>
      <div class="accordion__item__content" id="item3">
        Here's some more text. Woop woop!
      </div>
    </div>
    <div class="accordion__item">
      <a class="accordion__item__title" href="#item4">
        Aaaand again.
      </a>
      <div class="accordion__item__content" id="item4">
        Here's some more text. Woop woop!
      </div>
    </div>
  </div>
</div>
</body>
</html>

6. By Simon

Made by Simon. Accordion slider. Source



<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

  
<style>
/* The base code is from https://www.cssscript.com/demo/pure-css-vertical-image-accordion-slider/ I just adapted it in scss and put it on codepen*/
.accordion {
  width: 100%;
  max-width: 1080px;
  height: 250px;
  overflow: hidden;
  margin: 50px auto;
}
.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
  /*ul*/
}
.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 33.33%;
  height: 250px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: all 500ms ease;
}
.accordion ul li:nth-child(1) {
  background-image: url("https://unsplash.it/650/250?image=680");
}
.accordion ul li:nth-child(2) {
  background-image: url("https://unsplash.it/650/250?image=668");
}
.accordion ul li:nth-child(3) {
  background-image: url("https://unsplash.it/650/250?image=659");
}
.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}
.accordion ul li div a {
  display: block;
  height: 250px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  transition: all 200ms ease;
}
.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  transform: translateX(-20px);
  transition: all 400ms ease;
}
.accordion ul li div a h2 {
  font-family: Montserrat, sans-serif;
  text-overflow: clip;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 160px;
}
.accordion ul li div a p {
  top: 160px;
  font-size: 13.5px;
}
.accordion ul:hover li {
  width: 10%;
}
.accordion ul:hover li:hover {
  width: 80%;
}
.accordion ul:hover li:hover a {
  background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a * {
  opacity: 1;
  transform: translateX(0);
}

@media screen and (max-width: 600px) {
  body {
    margin: 0;
  }

  .accordion {
    height: auto;
  }
  .accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    transition: none;
  }
}
</style>
</head>
<body>
  <div class="accordion">
  <ul>
    <li>
      <div> <a href="#">
        <h2>Title 1</h2>
        <p>Description 1</p>
        </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>Title 2</h2>
        <p>Description 2</p>
        </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>Title 3</h2>
        <p>Description 3</p>
        </a> </div>
    </li>
  </ul>
</div>
</body>
</html>

7. By Bob Matyas

Made by Bob Matyas. Modern`looking Accordion FAQ. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:[email protected];700&display=swap" rel="stylesheet"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
<style>
:root {
    
    /* colors */
    --purple: #7276e1;
    --orange: hsl(14, 88%, 65%);
    --blue-dark: hsl(238, 29%, 16%);
    --grey-light: hsl(237, 12%, 33%);
    --blue-mid: hsl(240, 6%, 50%);

    /* fonts */
    --font: 'Kumbh Sans', sans-serif;
    --base-font-size: 1.2rem;

}

.attribution { 
    color: #fff;
    font-size: 11px; 
    margin-top: 25px;
    text-align: center;  
}

.attribution a { color:#fff; }

* { box-sizing: border-box; }

html {
    font-size: 10px;
}

body { 
    align-items: center;
    background-image: linear-gradient(-180deg,  hsl(273, 75%, 66%),hsl(240, 73%, 65%)); 
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-weight: 400;
    height: 100vh;
    justify-content: center;
    padding: 0;
}

.faq { 
    background-color: #fff;
    border-radius: 25px;
    padding: 50px 25px;
    margin: 150px 5% 5% 5%;
    min-width: 320px;
    max-width: 320px;
}

.faq__logo {
    background: url('https://bobmatyas.github.io/fm-faq-accordion/images/bg-pattern-mobile.svg') center bottom no-repeat;
    background-color: transparent;
    margin: 0 auto;
    max-width: 300px;
    padding: 0;
    margin-top: -157px;
}

.faq__logo__image {
    margin-left: -13px;
    margin-bottom: 13px;
}

.faq__heading { 
    color: var(--blue-dark);
    font-size: 3.2rem;
    font-weight: 700;
    text-align: center; 
}

.faq__detail {
    border-bottom: 1px solid hsl(240, 5%, 91%);
    margin: 20px 0 0 0;
    padding: 5px 0 20px 0;
}

.faq__summary:hover,
.faq__summary:active { 
    color: var(--orange);
    cursor: pointer; 
}

.faq__detail[open] > .faq__summary { 
    font-weight: 700; 
}

.faq__summary {
    list-style: none;
  }

.faq__summary::-webkit-details-marker {
    display: none;
  }

.faq__summary { 
    display: block;
    padding: 0;
    position: relative;
    text-align: right;
}

    
.faq__summary:after {
    display: inline-block;
    content: url("https://bobmatyas.github.io/fm-faq-accordion/images/icon-arrow-down.svg");
    background-repeat: no-repeat;
    background-position: right center;
    text-align: right;
    padding-bottom: 20px;
  }
  
details[open] .faq__summary:after {
    display: inline-block;
    width: 18px;
    height: 10px;
    content: "";
    background-image: url("https://bobmatyas.github.io/fm-faq-accordion/images/icon-arrow-down.svg");
    background-repeat: no-repeat;
    background-position: center right;
    transform:scaleY(-1);
}
  

.faq__question {
    left: 0;
    position: absolute;
    text-align: left;
    top: 0;
    width: 90%;
}

.faq__question {
    display: inline-block;
    margin: 5px 0;
    text-align: left;
    width: 90%;
}

.faq__summary {
    color: var(--blue-dark);
    font-size: 1.4rem; 
}

.faq__summary:focus {
    color: var(--orange); 
    font-weight: bold;
    outline: none;
}

.faq__text {
    color: var(--blue-mid);
    font-size: var(--base-font-size);
    line-height: 1.6;
    margin: 10px 0 0 0;
}

.hidden-lg { display: block; }
    
.visible-lg { display: none; }


@media (min-width: 900px) {
    .faq {
        align-items: center;
        display: flex;
        justify-content: space-between;
        min-width: 900px;
        padding: 0;
        margin: 0;
    }

    .faq__logo__holder { 
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: center;
    }

    .faq__holder {
        margin: 0 50px;
        padding: 70px 0;
        max-width: 350px;
        width: 350px;
    }

    .faq__logo {
        display: flex;
        align-items: center;
        background-image: url(https://bobmatyas.github.io/fm-faq-accordion/images/illustration-woman-online-desktop.svg), url(https://bobmatyas.github.io/fm-faq-accordion/images/bg-pattern-desktop.svg);
        background-position: -75px center, -571px -270px;
        background-size: 100%, 200%;
        height: 100%;
        min-width: 300px;
        margin: 0;
        padding: 0;
        width: 525px;
        max-width: 500px;
        position: relative;
    }

    .faq__heading {
        text-align: left;
    }

    .hidden-lg { display: none; }

    .visible-lg { 
        display: block; 
        position: absolute;
        margin-top: 120px;
        left: -80px;    
    }

    .faq__text {
        margin: 0 0 10px 0;
    }

    .faq__detail {
        margin: 10px 0 0 0 0;
        padding: 0;
    }
}
</style>
</head>
<body>
  <main class="faq">
        
  <div class="faq__logo__holder">
  <div class="faq__logo">
    <img src="https://bobmatyas.github.io/fm-faq-accordion/images/illustration-woman-online-mobile.svg" alt="woman at a computer" class="faq__logo__image hidden-lg">
    <img src="https://bobmatyas.github.io/fm-faq-accordion/images/illustration-box-desktop.svg" alt="" class="faq__logo__image visible-lg">
  </div>
  </div>
  
  <div class="faq__holder">
  <h1 class="faq__heading">FAQ</h1>
 
  <details class="faq__detail">
      <summary  class="faq__summary"><span class="faq__question">How many team members can I invite?</span></summary>
      <p class="faq__text">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
  </details>

  <details class="faq__detail">
    <summary  class="faq__summary"><span class="faq__question">What is the maximum file upload size?</span></summary>
    <p class="faq__text">No more than 2GB. All files in your account must fit your allotted storage space.</p>
  </details>  

  <details class="faq__detail">
    <summary  class="faq__summary"><span class="faq__question">How do I reset my password?</span></summary>
    <p class="faq__text">Click β€œForgot password” from the login page or β€œChange password” from your profile page.</p>
    <p class="faq__text">A reset link will be emailed to you.</p>
  </details>  
  
  <details class="faq__detail">
    <summary  class="faq__summary"><span class="faq__question">Can I cancel my subscription?</span></summary>
    <p class="faq__text">Yes! Send us a message and we’ll process your request no questions asked.</p>
  </details> 
  
  <details class="faq__detail">
    <summary  class="faq__summary"><span class="faq__question">Do you provide additional support?</span></summary>
    <p class="faq__text">Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
  </details>   

</div>
</main> 
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://www.bobmatyas.com">Bob Matyas</a>.
  </div>
</body>
</html>

8. By Atfli-Houcine

Made by Atfli-Houcine. Accordion with animated icon and buttons. Source



<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
body{
        background-color:#ffcde4;
        margin:0;
        padding:0;
        height:2000px;
        direction:rtl
      }
      .bg-one,
      .bg-one ~ .content span{
      background-color:#9b59b6;

      }

      .bg-two,
      .bg-two ~ .content span{
      background-color:#FE6860;

      }

      .bg-three,
      .bg-three ~ .content span{
      background-color:#23B684;

      }

      .bg-four,
      .bg-four ~ .content span{
      background-color:#603838;

      }
      .bg-five,
      .bg-five ~ .content span{
      background-color:#F9BF3B;

      }
      .bg-six,
      .bg-six ~ .content span{
      background-color:#C25396;

      }

.tabs-box{
  background-color: #3d4a60;
  color:#FFF;
  width:300px;
  margin:40px auto;
  box-shadow:0 0 10px rgba(0,0,0,.3)
}
.tabs-box .acord{
 position:relative;
 overflow:hidden;


}
.tabs-box .acord label{
  position:relative;
  z-index: 1000;
  display:block;
  padding:0 40px 0 0;
}
.tabs-box .acord label i{
  display:block;
  position:absolute;
  top:0;
  right:0;
  width:40px;
  text-align: center;
}
.tabs-box .acord label,
.tabs-box .acord label i,
.tabs-box .acord i.fa-chevron-circle-down{
    height:40px;
    line-height: 40px;
}
.tabs-box .acord i.fa-chevron-circle-down{
  position:absolute;
  z-index: 1111;
  top:0;
  left:0;
  width: 40px;
  text-align: center;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  transition:all .2s linear 0s;
}

.tabs-box .acord input{
  display:none;
}

.tabs-box .content{
  position:relative;
  overflow:hidden;
  -moz-transition:height 1s linear 0s;
  -webkit-transition: height 1s linear 0s;
  transition: height 1s linear 0s;
  height:0;
  font-size:14px;
  line-height:22px;
  color:#e4e4e4;
  text-align:center;
}

.tabs-box .content span.square{
  display: block;
  position: absolute;
  left: 10px;
  top: -17px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}
.tabs-box input[type="checkbox"]:checked ~ div.content{
  height:300px;
  padding:10px;
}
.tabs-box input[type="checkbox"]:checked ~ i.fa-chevron-circle-down{
transform:rotate(180deg);
}
</style>
</head>
<body>
  <div class="tabs-box">
    <div class="acord">
        <label for="tb-one" class="bg-one">
          <i class="fa fa-comments"></i>
          acord one
        </label>
        <input type="checkbox" name="mytabs" id="tb-one">
        <i class="fa fa-chevron-circle-down"></i>
        <div class="content" >
  <span class="square"></span>

        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>

    <div class="acord">
        <label for="tb-two"  class="bg-two">
          <i class="fa fa-cogs"></i>
          acord two
        </label>
        <input type="checkbox" name="mytabs" id="tb-two">
        <i class="fa fa-chevron-circle-down"></i>
        <div class="content">
          <span class="square"></span>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>

    <div class="acord">
        <label for="tb-three"  class="bg-three">
          <i class="fa fa-diamond"></i>
          acord three
        </label>
        <input type="checkbox" name="mytabs" id="tb-three">
        <i class="fa fa-chevron-circle-down"></i>
        <div class="content">
          <span class="square"></span>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>


    <div class="acord">
        <label for="tb-four"  class="bg-four">
          <i class="fa fa-image"></i>
          acord four
        </label>
        <input type="checkbox" name="mytabs" id="tb-four">
        <i class="fa fa-chevron-circle-down"></i>
        <div class="content">
          <span class="square"></span>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>

    <div class="acord">
        <label for="tb-five"  class="bg-five">
          <i class="fa fa-puzzle-piece"></i>
          acord five
        </label>
        <input type="checkbox" name="mytabs" id="tb-five">
        <i class="fa fa-chevron-circle-down"></i>
        <div class="content">
          <span class="square"></span>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>

    <div class="acord">
        <label for="tb-six"  class="bg-six">
          <i class="fa fa-tags"></i>
          acord six
        </label>
        <input type="checkbox" name="mytabs" id="tb-six">
        <i class="fa fa-chevron-circle-down"></i>
        <div class="content">
          <span class="square"></span>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>

  </div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js'></script>

</body>
</html>

9. By Maksim Goffin

Made by Maksim Goffin. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto+Condensed" rel="stylesheet">

<style>
body {
	margin: 0;
}
.accordion ul {
	display: table;
	table-layout: fixed;
  width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
}
.accordion ul li {
  display: inline-block;	
	position: relative;
	width: 100%;
	min-height: 300px;
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	color: #fff;
}
.accordion ul li:nth-child(1) {
	background-image: url("http://maksim.be/codepen/img-1.jpg");
}
.accordion ul li:nth-child(2) {
	background-image: url("http://maksim.be/codepen/img-2.jpg");
}
.accordion ul li:nth-child(3) {
	background-image: url("http://maksim.be/codepen/img-3.jpg");
}
.accordion ul li::before {
	position: absolute;
	width: 100%;
	height: 100%;	
  left: 0;
  top: 0;
	background: rgba(0,0,0,0.3);
	content: '';
}
.accordion ul li div {
	transform: translateY(0px);
	transition: transform 500ms;
}
.accordion ul li a {
	text-decoration: none;
	color: #fff;
}
.accordion ul li h1 {
	font-family: 'Roboto Condensed', sans-serif;
	text-overflow: clip;
	font-size: 2.5em;
	line-height: 3rem;
}
.accordion ul li p {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
	opacity: 1;
	transition: opacity 200ms;
	margin-left: 10vw;
	margin-right: 10vw;
}

@media screen and (min-width: 769px) {
.accordion {
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
}
.accordion ul {
	height: 600px;
}
.accordion ul li {
	display: table-cell;
	vertical-align: bottom;
	width: 33%;
	height: 100vh;
	min-height: 600px;
	transition: all 500ms ease;
}
.accordion ul:hover li {
	width: 30%;
}
.accordion ul:hover li:hover {
	width: 40%;
}
.accordion ul li::before {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 95%);
	opacity: 0;
	transition: opacity 1s, transform 1s;
}
.accordion ul li:hover::before {
	opacity: 1;
}
.accordion ul:hover li:hover * {
	opacity: 1;
	transition: opacity 500ms, transform 500ms;
	transform: translateX(0);
}
.accordion ul li div {
	transform: translateY(120px);
	transition: transform 500ms;
}
.accordion ul li p {
	width: 30vw;
	height: 200px;
	opacity: 0;
  margin-left: auto;
	margin-right: auto;
}
}
</style>
</head>
<body>
  <div class="accordion">
  <ul>
    <li><a href="#">
      <div>
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut consequat.</p>
      </div>
      </a> </li>
    <li><a href="#">
      <div>
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      </a> </li>
    <li><a href="#">
      <div>
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      </a> </li>
  </ul>
</div>
</body>
</html>
 

10. By Steven Johnson

Made by Steven Johnson. Minimalistic CSS Accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

  
<style>
body {
  font-family: poppins, sans-serif;
  padding: 0;
  margin: 0;
  background: #F7F8FB;
}

.header {
  background: #5391F2;
  color: white;
  height: auto;
  text-align: center;
  padding: 100px 0;
}

/* Accordion CSS for white dropdown */
.accordion {
  background: white;
  border: 1px solid #EDEDED;
  border-radius: 5px;
  font-weight: 700;
  margin: 10px;
  padding: 10px 20px;
  cursor: pointer;
}

.accordionDrop {
  padding: 0px 30px;
}

::-webkit-details-marker { 
  display: none;
}
</style>
</head>
<body>
  <!--Header-->
<div class="header">
  <h1>Simple CSS Accordion</h1>
  <p>Learn how to create an accordion element on your website without any knowledge of JavaScript.</p>
</div>

<!--Accordion 1-->
<details>
  <summary class="accordion">What is an accordion?</summary>
  
  <div class="accordionDrop">What you just did was click on an accordion. Essentially, an accordion is a graphical control element comprising a vertically stacked list of of items that can be expanded or collapsed to reveal content.</div>
</details>

<!--Accordion 2-->
<details>
  <summary class="accordion">What do you use an accordion for?</summary>
  
  <div class="accordionDrop">An accordion is great for hiding information that you only want to be display when a user is interested. For example: Using an accordion is great on a frequently asked questions page, especially if you have a bunch of questions!</div>
</details>

<!--Accordion 3-->
<details>
  <summary class="accordion">I still need help!</summary>
  
  <div class="accordionDrop">I'm always open to helping you out. If you wish to contact me, my <a href="https://twitter.com/techjohnson">Twitter</a> is always open!</div>
</details>
</body>
</html>