14+ JavaScript Accordion Examples

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

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

Related Posts

JavaScript Accordion Examples

1. By Henrik Sunden

Made by Henrik Sunden. JavaScript Accordion with extra info. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
  
<style>
@charset "UTF-8";
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
html {
  margin-top: 100px;
}

body {
  max-width: 800px;
  margin: 0 auto;
  height: 1000px;
  color: rgba(117, 117, 117, 0.9);
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  line-height: 1.5em;
}

a {
  color: #f4511e;
}
a:hover {
  color: rgba(244, 81, 30, 0.7);
  text-decoration: none;
}

.accordion {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: 0.4s;
  border-top: 1px solid #f1f1f1;
  position: relative;
}
.accordion:hover, .accordion:active {
  background-color: #f1f1f1;
}
.accordion:before {
  content: "+";
  margin-right: 10px;
  color: #f4511e;
  font-size: 22px;
}
.accordion:active:before {
  content: "โˆ’";
  color: #f4511e;
}

.accordion-price {
  right: 35px;
  top: 30%;
  position: absolute;
  font-weight: 600;
}
.accordion-price:hover {
  color: #f4511e;
}

.panel {
  background-color: white;
  border: 1px solid #f1f1f1;
  overflow: hidden;
  max-height: 0px;
  transition: max-height 0.2s ease-out;
}
.panel .panel-inner {
  padding: 30px 20px 40px 20px;
}
.panel .panel-button {
  background: #f4511e;
  color: #fff;
  padding: 10px 20px;
  width: 170px;
  text-align: center;
  margin: 20px 10px 0 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
  display: inline-block;
}
.panel .panel-button:hover {
  background: #757575;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
</style>
</head>
<body>
  <div class="container-fluid">
  
  <button class="accordion">Adult
      <div class="accordion-price">15 โ‚ฌ</div>
  </button>
        <div class="panel">
          <div class="panel-inner">
            <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> 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>
            <div class="panel-button">BUY ONLINE</div><div class="panel-button">ANNUAL TICKET</div>
          </div>
        </div>

  <button class="accordion">Child under 4 years<div class="accordion-price">0 โ‚ฌ</div>
  </button>
    <div class="panel">
      <div class="panel-inner">
      <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>
        <div class="panel-button">BUY ONLINE</div>
      </div>
    </div>

  <button class="accordion">Child 4-17 years<div class="accordion-price">6 โ‚ฌ</div>
  </button>
    <div class="panel">
      <div class="panel-inner">
        <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>
          <div class="panel-button">BUY ONLINE</div>
       </div>
   </div>

  <button class="accordion">Student, senior<div class="accordion-price">8 โ‚ฌ</div>
  </button>
    <div class="panel">
      <div class="panel-inner">
        <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>
          <div class="panel-button">BUY ONLINE</div>
       </div>
  </div>

  <button class="accordion">Group ticket<div class="accordion-price">36 โ‚ฌ</div>
  </button>
    <div class="panel">
      <div class="panel-inner">
        <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>
          <div class="panel-button">BUY ONLINE</div>
      </div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  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";
    }
  });
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

2. By Charlie Doherty

Made by Charlie Doherty. JavaScript Accordion with Rotating icon effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2em 0.5em;
}

.accordion{
  width: 50em;
  max-width: 100%;
  margin-bottom: 0.05em;
  background-color: #3e75ec;
}

.toggle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 1em 1.3em;
  cursor: pointer;
}

.toggle p, .toggle ion-icon{
  font-size: 1.15rem;
  pointer-events: none;
}

.toggle ion-icon{
  font-size: 2rem;
}

.content{
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  transition: 250ms max-height cubic-bezier(.5,0,.1,1);
}

.content p{
  padding: 1.3em;
  background-color: #eee;
}

.toggle.active + .content{
  max-height: 80em;
}

.toggle.active ion-icon{
  transform: rotate(45deg);
}

@media(max-width: 425px){
    .toggle{
        padding: 0.9em 1.2em;
    }

    .toggle p{
      font-size: 0.9rem;
    }
    
    .toggle ion-icon{
      font-size: 1.5rem;
    }

    .content p{
      padding: 1.2em;
      font-size: 0.8em;
    }
}
</style>
</head>
<body>
  <div class="accordion">
    <div class="toggle">
        <p>Task one</p>
        <ion-icon name="add-sharp"></ion-icon>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita labore voluptas placeat hic omnis temporibus voluptatibus impedit sunt dolores obcaecati eveniet cupiditate vitae, ab voluptates quod, nostrum maiores sit assumenda.</p>
    </div>
</div>

<div class="accordion">
    <div class="toggle">
        <p>Task two</p>
        <ion-icon name="add-sharp"></ion-icon>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita labore voluptas placeat hic omnis temporibus voluptatibus impedit sunt dolores obcaecati eveniet cupiditate vitae, ab voluptates quod, nostrum maiores sit assumenda.</p>
    </div>
</div>

<div class="accordion">
    <div class="toggle">
        <p>Task three</p>
        <ion-icon name="add-sharp"></ion-icon>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita labore voluptas placeat hic omnis temporibus voluptatibus impedit sunt dolores obcaecati eveniet cupiditate vitae, ab voluptates quod, nostrum maiores sit assumenda.</p>
        </div>
</div>
      <script>
const toggles = document.querySelectorAll('.toggle');

toggles.forEach(toggle => toggle.addEventListener('click', e => {
  if (!e.target.classList.contains('active')) {
    toggles.forEach(toggle => toggle.classList.remove('active'));
  }
  toggle.classList.toggle('active');
}));
    </script>
</body>
</html>

3. By Travis Pronschinske

Made by Travis Pronschinske. Accordion with js Click effect. 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">

<style>
* {
  box-sizing: border-box;
}

html, body {
  background: whitesmoke;
  min-height: 100%;
  margin-top: 45px;
}

.content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  margin-bottom: 45px;
}

.c-accordion {
  width: 100%;
  margin: 5px 0;
}
.c-accordion--item {
  width: 100%;
  min-height: 42px;
  color: #3d3d3d;
  max-height: 10000px;
  transition: 0.5s ease;
}
.c-accordion--item:last-child {
  border-bottom: 1px solid #f4f4f4;
}
.c-accordion--item.active {
  transition: 0.3s ease;
  border-bottom: 1px solid #eaeaea;
}
.c-accordion--item.active .c-accordion--header {
  background: #fff;
  color: #3d3d3d;
}
.c-accordion--item.active .c-accordion--header .arrow {
  transform: rotate(180deg);
  transition: 0.3s ease;
}
.c-accordion--item.active .c-accordion--content {
  transition: 0.5s ease;
  max-height: 10000px;
  height: 100%;
}
.c-accordion--item.popout {
  box-shadow: rgba(0, 0, 0, 0.180392) 0px 5px 11px 0px, rgba(0, 0, 0, 0.14902) 0px 4px 15px 0px;
  transition: 0.3s ease;
  margin: 20px 0px;
  border-bottom: 1px solid #eaeaea;
}
.c-accordion--item.popout .c-accordion--header {
  background: #fff;
  color: #3d3d3d;
}
.c-accordion--item.popout .c-accordion--header .arrow {
  transform: rotate(180deg);
  transition: 0.3s ease;
}
.c-accordion--item.popout .c-accordion--content {
  transition: 0.5s ease;
  max-height: 10000px;
  height: 100%;
}
.c-accordion--item.disabled {
  border-left: 1px solid #fbfbfb;
  border-right: 1px solid #fbfbfb;
  border-top: 1px solid #fbfbfb;
}
.c-accordion--item.disabled:hover {
  cursor: not-allowed;
}
.c-accordion--item.disabled:last-child {
  border-bottom: 1px solid #fbfbfb;
}
.c-accordion--item.disabled .c-accordion--header {
  background: #fafafa;
  border-bottom-color: #fafafa;
  pointer-events: none;
  font-style: italic;
  color: #999999;
}
.c-accordion--item.disabled .c-accordion--header .arrow svg {
  fill: #999999;
}
.c-accordion--header {
  min-height: 42px;
  padding: 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
  font-weight: 600;
  background-color: #fff;
  color: #3d3d3d;
}
.c-accordion--header .arrow {
  transition: 0.1s ease;
}
.c-accordion--header .arrow svg {
  fill: #3d3d3d;
}
.c-accordion--header:hover {
  background-color: white;
}
.c-accordion--content {
  max-height: 0;
  overflow: hidden;
  transition: 0.2s ease;
  padding: 0;
  font-size: 14px;
  background-color: #fff;
}
.c-accordion--content .content-area {
  padding: 1em;
}
</style>
</head>
<body>
  <section class="content">
  <div class="c-accordion">
    <div class="c-accordion--item">
      <div class="c-accordion--header">
        <span class="header_label">Item 1</span>
                <span class="arrow">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
        </span>
      </div>
      <div class="c-accordion--content">
        <div class="content-area">
        <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
          </div>
      </div>
    </div>
    <div class="c-accordion--item">
      <div class="c-accordion--header">
        <span class="header_label">Item 2</span>
                <span class="arrow">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
        </span>
      </div>
           <div class="c-accordion--content">
             <div class="content-area">
      <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
             <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
             <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
             </div>
      </div>
    </div>
    <div class="c-accordion--item">
      <div class="c-accordion--header">
        <span class="header_label">Item 3</span>
        <span class="arrow">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
        </span>
      </div>
           <div class="c-accordion--content">
             <div class="content-area">
      <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
             <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
             <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
             </div>
      </div>
    </div>
    <div class="c-accordion--item disabled">
      <div class="c-accordion--header">
        <span class="header_label">Item 4</span>
        <span class="arrow">
          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
        </span>
      </div>
           <div class="c-accordion--content">
             <div class="content-area">
      <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
             <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
             <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
             </div>
      </div>
    </div>
  </div>
  
</section>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script>
function activatePanels() {

  var defaultOptions = {
    popout: true, // defaults the accordion to the popout styles instead of flat panels
    multiOpen: true // allows for multiple panels to be opened at a time instead of just one.
  };


  var accordions = document.querySelectorAll('.c-accordion'),z;
  for (z = 0; z < accordions.length; z++) {if (window.CP.shouldStopExecution(0)) break;

    var accordionItems = accordions[z].querySelectorAll('.c-accordion--item');
    var size = accordionItems.length,i;

    for (i = 0; i < size; i++) {if (window.CP.shouldStopExecution(1)) break;
      var accordionItem = accordionItems[i];
      var trigger = accordionItem.firstElementChild;
      trigger.onclick = function () {

        // grabs the header items parent to add the active or popout class to the accordion item.
        var item = this.parentElement;

        if (defaultOptions.multiOpen == true) {

          // checks to make sure the accordion item isnt disabled
          if (!item.classList.contains('disabled')) {

            // checks to see if the accordion is a popout or just a flat accordion with panels
            if (defaultOptions.popout == true) {
              item.classList.toggle("popout");
            } else {
              item.classList.toggle("active");
            }

          }

        } else {

          // finds all accordions on the page
          let accordions = document.querySelectorAll('.zc-accordion');
          let x = 0;

          // finds all items inside the acoordion
          for (x; x < accordions.length; x++) {if (window.CP.shouldStopExecution(2)) break;
            accordionItems = accordions[x].querySelectorAll('.zc-accordion--item');
            let size = accordionItems.length,
            y;

            // for loop through each item and remove the popout or active class before applying it to the new panel
            for (y = 0; y < size; y++) {if (window.CP.shouldStopExecution(3)) break;
              accordionItem = accordionItems[y];
              if (defaultOptions.popout == true) {
                accordionItem.classList.remove("popout");
              } else {
                accordionItem.classList.remove("active");
              }
            }window.CP.exitedLoop(3);
          }
          // checks to make sure the accordion item isnt disabled
          window.CP.exitedLoop(2);if (!item.classList.contains('disabled')) {

            // checks to see if the accordion is a popout or just a flat accordion with panels
            if (defaultOptions.popout == true) {
              item.classList.toggle("popout");
            } else {
              item.classList.toggle("active");
            }

          }
        }
      };
    }window.CP.exitedLoop(1);
  }window.CP.exitedLoop(0);
}

activatePanels();
    </script>
</body>
</html>

4. By Sebastian

Made by Sebastian. A Lightweight JavaScript accordion. Source

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

#accordion {width:459px; margin:50px auto}
.accordion {width:459px; font:12px Verdana,Arial; color:#033}
.accordion dt {width:439px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
.accordion dt:hover {background:url(images/header_over.gif)}
.accordion dd {overflow:hidden; background:#fff}
.accordion span {display:block; width:425px; border:2px solid #9ac1c9; border-top:none; padding:15px}

#accordion2 {width:259px; margin:50px auto; border:1px solid #333; border-top:none}
.accordion2 {width:259px; font:12px Verdana,Arial; color:#333}
.accordion2 dt {width:247px; padding:4px 6px; font-weight:bold; cursor:pointer; background-color:#666; background-image:url(images/arrow_down.gif); background-position:right center; background-repeat:no-repeat; color:#fff; border-top:1px solid #333}
.accordion2 dt:hover {background-color:#555}
.accordion2 .open {background-color:#444; background-image:url(images/arrow_up.gif)}
.accordion2 dd {overflow:hidden; background:#fff}
.accordion2 span {display:block; width:229px; border-top:none; padding:15px}
</style>
</head>
<body>
<div id="accordion">
	<dl class="accordion" id="slider">
		<dt>About</dt>
		<dd>
			<span>This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. For more information visit <a href="http://www.leigeber.com">leigeber.com</a>.</span>
		</dd>
		<dt>Instructions</dt>
		<dd>
			<span>To initialize an accordion use the following code:<br /><br />
				<code>
					var mySlider=new accordion.slider("mySlider");
					<br />mySlider.init("slider",0,"open");
				</code><br /><br />
				The init function takes 3 parameters: the id of the "dl", the location of the initially expanded section (optional) and the class for the active header (optional).
			</span>
		</dd>
		<dt>Licensing &amp; Support</dt>
		<dd>
			<span>This script is provided as-is with no warranty or guarantee. It is available at no cost for any project, non-commercial or commercial. Paid support is available by <a href="http://www.leigeber.com/contact/">clicking here</a>.</span>
		</dd>
	</dl>
</div>
<div id="accordion2">
	<dl class="accordion2" id="slider2">
		<dt>About</dt>
		<dd>
			<span>This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. For more information visit <a href="http://www.leigeber.com">leigeber.com</a>/</span>
		</dd>
		<dt>Instructions</dt>
		<dd>
			<span>To initialize an accordion use the following code:<br /><br />
				<code>
					var mySlider=new accordion.slider("mySlider");
					<br />mySlider.init("slider",0,"open");
				</code><br /><br />
				The init function takes 3 parameters: the id of the "dl", the location of the initially expanded section (optional) and the class for the active header (optional).
			</span>
		</dd>
		<dt>Licensing &amp; Support</dt>
		<dd>
			<span>This script is provided as-is with no warranty or guarantee. It is available at no cost for any project, non-commercial or commercial. Paid support is available by <a href="http://www.leigeber.com/contact/">clicking here</a>.</span>
		</dd>
	</dl>
</div>
      <script>
var accordion = function () {
  var tm = sp = 10;
  function slider(n) {this.nm = n;this.arr = [];}
  slider.prototype.init = function (t, c, k) {
    var a, h, s, l, i;a = document.getElementById(t);this.sl = k ? k : '';
    h = a.getElementsByTagName('dt');s = a.getElementsByTagName('dd');this.l = h.length;
    for (i = 0; i < this.l; i++) {var d = h[i];this.arr[i] = d;d.onclick = new Function(this.nm + '.pro(this)');if (c == i) {d.className = this.sl;}}
    l = s.length;
    for (i = 0; i < l; i++) {var d = s[i];d.mh = d.offsetHeight;if (c != i) {d.style.height = 0;d.style.display = 'none';}}
  };
  slider.prototype.pro = function (d) {
    for (var i = 0; i < this.l; i++) {
      var h = this.arr[i],s = h.nextSibling;s = s.nodeType != 1 ? s.nextSibling : s;clearInterval(s.tm);
      if (h == d && s.style.display == 'none') {s.style.display = '';su(s, 1);h.className = this.sl;} else
      if (s.style.display == '') {su(s, -1);h.className = '';}
    }
  };
  function su(c, f) {c.tm = setInterval(function () {sl(c, f);}, tm);}
  function sl(c, f) {
    var h = c.offsetHeight,m = c.mh,d = f == 1 ? m - h : h;c.style.height = h + Math.ceil(d / sp) * f + 'px';
    c.style.opacity = h / m;c.style.filter = 'alpha(opacity=' + h * 100 / m + ')';
    if (f == 1 && h >= m) {clearInterval(c.tm);} else if (f != 1 && h == 1) {c.style.display = 'none';clearInterval(c.tm);}
  }
  return { slider: slider };
}();

var slider1 = new accordion.slider("slider1");
slider1.init("slider");

var slider2 = new accordion.slider("slider2");
slider2.init("slider2", 0, "open");
    </script>
</body>
</html>

5. By Viorel Soltan

Made by Viorel Soltan. Simple Accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
  
<style>
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';

body {
	margin: 0;
	padding: 0;
	background: #fefefe;
	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-weight: normal;
	line-height: 1.5;
	color: #0a0a0a;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html, body {
  box-sizing: border-box;
	height: 100%;
}
*,
*::before,
*::after {
  box-sizing: inherit; }

.title {
  text-align: center;
  margin-bottom: 25px;
}

.container {
  max-width: 800px;
}

.container {
	margin: 0 auto;
	padding: 0;
}

.container h3 {
	font-size: 1.75rem;
	font-weight: 700;
}

.accordion a {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	width: 100%;
	padding: 1rem 3rem 1rem 1rem;
	color: #fff;
	font-size: 1.15rem;
	font-weight: 400;
	border-bottom: 1px solid #e5e5e5;
	background-color: #b27f5a;
}

.accordion a:hover,
.accordion a:hover::after {
	cursor: pointer;
	color: #f1f1f1;
	background-color: #895733;
}

.accordion a.active {
	color: #f1f1f1;
	border-bottom: 1px solid #fff;
	background-color: #895733;
}

.accordion a::after {
  font-family: FontAwesome;
  content:"\f078";
	position: absolute;
	float: right;
	right: 1rem;
	font-size: 26px;
	color: #fff;
	padding: 5px;
	width: 40px;
	height: 40px;
	text-align: center;
	top: 5px;
}

.accordion a.active::after {
   font-family: FontAwesome;
   content: "\f077";
   color: #f6f6f6;
}

.accordion .content {
	opacity: 0;
	padding: 0 1rem;
	max-height: 0;
	border-bottom: 1px solid #e5e5e5;
	overflow: hidden;
	clear: both;
	-webkit-transition: all 0.2s ease 0.15s;
	transition: all 0.2s ease 0.15s;
	background-color: #f1f1f1;
}

.accordion .content p {
	font-size: 1rem;
	font-weight: 300;
}

.accordion .content.active {
	opacity: 1;
	padding: 1rem;
	max-height: 100%;
	-webkit-transition: all 0.35s ease 0.15s;
	transition: all 0.35s ease 0.15s;
}

.accordion a div {
	position: relative;
	padding: 0px 10px;
	margin: 0 10px;
}

.accordion a div span {
	color: #b27f5a;
	background-color: #fff;
	border-radius: 50%;
	padding: 4px 10px;
	font-weight: bold;
}

.accordion-item {
	margin: 2px 0;
}
</style>
</head>
<body>
  <h2 class="title">Javascript Accordion Example</h2>

<div class="container">
  <div class="accordion">
    <div class="accordion-item">
<a><div><span>1</span></div>Accordion Title 1</a>
            <div class="content">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, illum?</p>
            </div>

         </div>
    
    <div class="accordion-item">
<a><div><span>2</span></div>Accordion Title 2</a>
            <div class="content">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, illum?</p>
            </div>

         </div>
    
    <div class="accordion-item">
<a><div><span>3</span></div>Accordion Title 3</a>
            <div class="content">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, illum?</p>
            </div>

         </div>
  </div>
  
</div>

      <script>
const items = document.querySelectorAll(".accordion a");

function toggleAccordion() {
  this.classList.toggle('active');
  this.nextElementSibling.classList.toggle('active');
}

items.forEach(item => item.addEventListener('click', toggleAccordion));
    </script>
</body>
</html>

6. By Adam Martin

Made by Adam Martin. Accordion with Arrow icon and click effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
body {
  margin: 0;
  padding: 0;
}
body .container {
  width: 95%;
  margin: auto;
  padding-top: 2rem;
  padding-bottom: 4rem;
}
@media (min-width: 992px) {
  body .container {
    width: 80%;
  }
}
body .container .title {
  text-align: center;
  margin-bottom: 2rem;
}
body .container .accordion .accordion-item {
  margin-bottom: 2rem;
}
body .container .accordion .accordion-item__header {
  position: relative;
  height: auto;
  cursor: pointer;
  background-color: #404040;
  padding: 1rem;
  transition: 0.3s ease-in-out background-color;
}
body .container .accordion .accordion-item__header h5 {
  color: #FFFFFF;
  margin-bottom: 0;
}
body .container .accordion .accordion-item__header .open-close-icon {
  right: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
body .container .accordion .accordion-item__header .open-close-icon.open {
  transform: rotateX(180deg);
}
body .container .accordion .accordion-item__header .open-close-icon__line-1 {
  width: 16px;
  height: 2px;
  background-color: #FFFFFF;
  transform: rotate(45deg);
}
body .container .accordion .accordion-item__header .open-close-icon__line-2 {
  position: absolute;
  right: -10px;
  bottom: 0px;
  width: 16px;
  height: 2px;
  background-color: #FFFFFF;
  transform: rotate(135deg);
}
body .container .accordion .accordion-item__text-block {
  font-family: sans-serif;
  background-color: #000000;
  transition: max-height 0.3s ease-out;
  max-height: 0;
  overflow: hidden;
}
body .container .accordion .accordion-item__text-block p {
  color: #FFFFFF;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
body .container .accordion .accordion-item__text-block p:first-child {
  padding-top: 0.5rem;
}
</style>
  </head>
  <body>
    <div class="container">
      <h1 class = "title">About Me</h1>
      <div class="accordion">
        <div class="accordion-item">
          <div class="accordion-item__header">
            <div class="open-close-icon">
              <div class="open-close-icon__line-1"></div>
              <div class="open-close-icon__line-2"></div>
            </div>
            <h5>Skills</h5>
          </div>
          <div class="accordion-item__text-block">
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-item__header">
            <div class="open-close-icon">
              <div class="open-close-icon__line-1"></div>
              <div class="open-close-icon__line-2"></div>
            </div>
            <h5>Education</h5>
          </div>
          <div class="accordion-item__text-block">
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-item__header">
            <div class="open-close-icon">
              <div class="open-close-icon__line-1"></div>
              <div class="open-close-icon__line-2"></div>
            </div>
            <h5>Employment History</h5>
          </div>
          <div class="accordion-item__text-block">
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-item__header">
            <div class="open-close-icon">
              <div class="open-close-icon__line-1"></div>
              <div class="open-close-icon__line-2"></div>
            </div>
            <h5>Example Projects</h5>
          </div>
          <div class="accordion-item__text-block">
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-item__header">
            <div class="open-close-icon">
              <div class="open-close-icon__line-1"></div>
              <div class="open-close-icon__line-2"></div>
            </div>
            <h5>Awards</h5>
          </div>
          <div class="accordion-item__text-block">
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-item__header">
            <div class="open-close-icon">
              <div class="open-close-icon__line-1"></div>
              <div class="open-close-icon__line-2"></div>
            </div>
            <h5>Hobbies and Interests</h5>
          </div>
          <div class="accordion-item__text-block">
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var openCloseTab = document.getElementsByClassName('accordion-item__header');
var openCloseIcon = document.getElementsByClassName('open-close-icon');

for (var i = 0; i < openCloseTab.length; i++) {if (window.CP.shouldStopExecution(0)) break;

  openCloseTab[i].addEventListener('click', function () {
    var textBlock = this.nextElementSibling;

    if (textBlock.style.maxHeight) {
      textBlock.style.maxHeight = null;
      this.style.backgroundColor = '#404040';
      this.firstElementChild.classList.remove('open');

    } else {
      this.style.backgroundColor = '#000000';
      textBlock.style.maxHeight = textBlock.scrollHeight + 'px';
      this.firstElementChild.classList.add('open');
    }
  });
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

7. By Sureshrkm

Made by Sureshrkm. Simple Pure JavaScript accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
body{
    background: linear-gradient(to right, #25c481, #25b7c4);}
.accordionWrapper{padding:30px;background:#fff;float:left;width:80%;box-sizing:border-box;margin:10%;    box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);}
.accordionItem{
    float:left;
    display:block;
    width:100%;
    box-sizing: border-box;
    font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
    cursor:pointer;
    margin:0px 0px 10px 0px;
    padding:10px;
    background:#2980b9;
    color:#fff;
    width:100%;
border-radius: 3px;
        box-sizing: border-box;
}
.close .accordionItemContent{
    height:0px;
    transition:height 1s ease-out;
	transform: scaleY(0);
    float:left;
    display:block;
    
    
}
.open .accordionItemContent{
        padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 100%;
    margin: 0px 0px 10px 0px;
    display:block;
	transform: scaleY(1);
	transform-origin: top;
	transition: transform 0.4s ease;
        box-sizing: border-box;
}

.open .accordionItemHeading{
    margin:0px;
        -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #bdc3c7;
    color: #7f8c8d;
}
</style>
</head>
<body>
  <div class="accordionWrapper">
<div class="accordionItem open">
      <h2 class="accordionItemHeading">About accordions</h2>
      <div class="accordionItemContent">
        <p>text</p>
      </div>
    </div>

    <div class="accordionItem close">
      <h2 class="accordionItemHeading">Accordion items</h2>
      <div class="accordionItemContent">
        <p>text</p>
        <ul>
          <li>List item #1</li>
          <li>List item #2</li>
          <li>List item #3</li>
        </ul>
      </div>
    </div>

    <div class="accordionItem close">
      <h2 class="accordionItemHeading">JavaScript accordion</h2>
      <div class="accordionItemContent">
        <p>text</p>
      </div>
    </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
for (i = 0; i < accHD.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  accHD[i].addEventListener('click', toggleItem, false);
}window.CP.exitedLoop(0);
function toggleItem() {
  var itemClass = this.parentNode.className;
  for (i = 0; i < accItem.length; i++) {if (window.CP.shouldStopExecution(1)) break;
    accItem[i].className = 'accordionItem close';
  }window.CP.exitedLoop(1);
  if (itemClass == 'accordionItem close') {
    this.parentNode.className = 'accordionItem open';
  }
}
    </script>
</body>
</html>

8. By Norhan ms

Made by Norhan ms. JavaScript Accordion with plus and minus icon. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap');

:root {
    --c1: hotpink;
    --c2: #884EA0;
}

body {
    font-family: 'Noto Sans', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;

}

.container {
    width: 50vw;
    margin: 40px 0;
}

.container h1 {
    color: var(--c1);
    width: 30rem;
    padding: 5px;
    margin-bottom: 20px;
    position: relative;
}

.container h1::after {
    content: "";
    position: absolute;
    width: 75px;
    height: 3px;
    background: linear-gradient(to left, var(--c1), var(--c2));
    bottom: 0;
    left: 25rem;

}

.accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.accordion .accordion__header {
    border: 2px solid var(--c2);
    display: flex;
    align-items: center;
    margin: 10px 0;
    border-radius: 50px;
    padding: 5px;
}

.accordion .accordion__header h5 {
    margin: 0;
    padding: 3px 0 0 0;
    color: var(--c2);
}

.accordion .accordion__header .icon {
    margin: 0 10px 0 0;
    width: 25px;
    height: 25px;
    background: var(--c2);
    border-radius: 50%;
    transition: all 0.5s ease-in;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

/* panel that contain content
=================================================*/
.accordion .accordion__panel {
    max-height: 0;
    overflow: hidden;
}

.accordion .accordion__panel .panel__content {
    padding: 0 15px;
    border-left: 1px solid var(--c2);
    font-size: 18px;
    margin-left: 25px;
    transition: all 0.5 ease-in;
    -webkit-transition: all 0.5 ease-in;
    -moz-transition: all 0.5 ease-in;
    -ms-transition: all 0.5 ease-in;
    -o-transition: all 0.5 ease-in;
}

/* added by javascript
==========================================================*/
.accordion .active {
    max-height: 100%;
    background-color: var(--c2);
}

.accordion .active h5 {
    color: #fff ;
}

.accordion .active .icon {
    background-color: #fff;
    color: var(--c2);
}

/*===========================================================*/
@media only screen and (max-width:695px) {
    .container {
        width: 70vw;
    }
    .container h1 {
        width: 10rem;
        font-size: 2rem;
    }

    .container h1::after {
       left: 0;
    }
  

}
</style>
</head>
<body>
  <div class="container">
        <h1>Frequently Asked Questions (FAQ)</h1>
        <!--==================================================================-->
        <div class="accordion">
            <div class="accordion__header">
                <div class="icon">
                    <i class="fas fa-plus"></i>
                </div>
                <h5>What is favorite programming language?</h5>

            </div>
            <div class="accordion__panel">
                <p class="panel__content">
                    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for
                    previewing layouts and visual mockups.

                </p>
            </div>
        </div>
        <!--==================================================================-->
        <!--==================================================================-->
        <div class="accordion">
            <div class="accordion__header">
                <div class="icon">
                    <i class="fas fa-plus"></i>
                </div>
                <h5>What is favorite programming language?</h5>

            </div>
            <div class="accordion__panel">
                <p class="panel__content">
                    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for
                    previewing layouts and visual mockups.

                </p>
            </div>
        </div>
        <!--==================================================================-->
        <!--==================================================================-->
        <div class="accordion">
            <div class="accordion__header">
                <div class="icon">
                    <i class="fas fa-plus"></i>
                </div>
                <h5>What is favorite programming language?</h5>

            </div>
            <div class="accordion__panel">
                <p class="panel__content">
                    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for
                    previewing layouts and visual mockups.

                </p>
            </div>
        </div>
        <!--==================================================================-->
        <!--==================================================================-->
        <div class="accordion">
            <div class="accordion__header">
                <div class="icon">
                    <i class="fas fa-plus"></i>
                </div>
                <h5>What is favorite programming language?</h5>

            </div>
            <div class="accordion__panel">
                <p class="panel__content">
                    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for
                    previewing layouts and visual mockups.

                </p>
            </div>
        </div>
        <!--==================================================================-->
      <script>
const acc = document.querySelectorAll('.accordion .accordion__header');
console.log(acc);
const len = acc.length;

/*
for (let i = 0; i < len; i++) {
    acc[i].addEventListener('click', function () {
        const childIco = this.querySelector('.icon>i');


        let panel = this.nextElementSibling;
        console.log(panel);
        if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
            childIco.classList.add('fa-plus');
            childIco.classList.remove('fa-minus');
            this.classList.remove('active');
        } else {
            panel.style.maxHeight = `${panel.scrollHeight}px`;
            childIco.classList.remove('fa-plus');
            childIco.classList.add('fa-minus');
            this.classList.toggle('active');

        }
    })
}

*/

acc.forEach(accElem => {
  accElem.addEventListener('click', function () {
    const childIco = this.querySelector('.icon>i');


    let panel = this.nextElementSibling;
    console.log(panel);
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
      childIco.classList.add('fa-plus');
      childIco.classList.remove('fa-minus');
      this.classList.remove('active');
    } else {
      panel.style.maxHeight = `${panel.scrollHeight}px`;
      childIco.classList.remove('fa-plus');
      childIco.classList.add('fa-minus');
      this.classList.toggle('active');

    }
  });
});
    </script>
</body>
</html>

9. By Julian

Made by Julian. Accordion with Flexbox layout. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

section {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    width: 900px;
}

section > * {
    width: 400px;
}

.accordion {
    font-family: 'Open Sans';
    margin-bottom: 10px;
    margin-top: 10px;
}

.accordion-header {
    border: 1px solid #cad2d8;
    border-radius: 30px;
    color: #8f9cab;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    padding: 10px 30px;
    transition: 0.12s ease-in-out;
}

.accordion-header > span {
    color: #14cdeb;
    margin-right: 10px;
}

.accordion-header.expanded-bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-header.expanded-top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion-header:hover {
    background-color: #f8f8f8;
}

.accordion-content {
    background-color: #f2f5f5;
    border-left: 1px solid #cad2d8;
    border-right: 1px solid #cad2d8;
    opacity: 1;
    padding: 10px 30px;
}

.accordion-content.transition {
    transition: 0.24s ease-in-out;
}

.accordion-content.invisible {
    opacity: 0;
    padding: 5px;
    visibility: hidden;
}

.accordion-content.invisible > * {
    display: none;
}

.accordion-content.last-of-block {
    border-bottom: 1px solid #cad2d8;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
</style>
</head>
<body>
  <section>
    <div class="accordion">
        <div class="accordion-header"><span>+</span>First Topic</div>
        <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae expedita dolor commodi illum impedit veritatis deleniti facere consectetur repudiandae provident libero molestias, tempora qui? Non ab consectetur maxime dolore tempora.</p>
        </div>
        <div class="accordion-header"><span>+</span>Second Topic</div>
        <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quidem odio quibusdam inventore itaque voluptatibus unde quod. In officiis veniam eius tempore eveniet? Nihil esse facere illum voluptate quia accusamus.</p>
        </div>
        <div class="accordion-header"><span>+</span>Third Topic</div>
        <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum voluptatum hic facilis obcaecati eligendi voluptas atque porro. Magnam aliquam voluptas, vel accusantium explicabo, commodi eveniet, voluptatibus itaque nobis tempore cupiditate.</p>
        </div>
        <div class="accordion-header"><span>+</span>Fourth Topic</div>
        <div class="accordion-content">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere fugiat soluta, adipisci corporis rerum distinctio rem veniam vel omnis fuga eveniet eaque saepe earum, repudiandae id laborum cumque eum molestias.</p>
        </div>
    </div>
    <div class="accordion">
        <div class="accordion-header"><span>+</span>Fifth Topic</div>
        <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, magnam magni voluptas quasi temporibus maiores tempore repudiandae vero veniam provident harum? Quasi placeat voluptates laudantium, iusto qui facilis ratione et?</p>
        </div>
        <div class="accordion-header"><span>+</span>Sixth Topic</div>
        <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, similique deleniti. Sunt sit modi tempora quis reprehenderit dolor, ducimus, sed quaerat consectetur nostrum hic dolores, provident voluptates debitis eius dolore?</p>
        </div>
        <div class="accordion-header"><span>+</span>Seventh Topic</div>
        <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad ut molestiae sit repellat iste distinctio repellendus, dolorem recusandae consequatur debitis, doloremque tempore veniam ullam saepe quidem eligendi, eos dignissimos qui.</p>
        </div>
        <div class="accordion-header"><span>+</span>Eight Topic</div>
        <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus dolorem at sed beatae nostrum ducimus quibusdam. Esse at repudiandae possimus numquam. Expedita porro, quos optio consequatur iste eligendi aliquam fugiat?</p>
        </div>
    </div>
</section>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
const accordionContentHeights = [];

const toggleAccordion = (accordion, headerIndex) => {
  const currentAccordion = document.getElementsByClassName('accordion')[accordion];
  const accordionHeaders = currentAccordion.getElementsByClassName('accordion-header');
  const currentHeader = accordionHeaders[headerIndex];
  const nextHeader = accordionHeaders[headerIndex + 1];
  const accordionContent = currentAccordion.getElementsByClassName('accordion-content')[headerIndex];

  currentHeader.classList.toggle('expanded-top');

  if (nextHeader) {
    nextHeader.classList.toggle('expanded-bottom');
  } else {
    accordionContent.classList.toggle('last-of-block');
  }

  if (accordionContent.classList.contains('invisible')) {
    currentHeader.firstElementChild.innerText = 'โ€“';

    // Set accordion content height to the stored scrollHeight so that the transition plays.
    accordionContent.style.height = accordionContentHeights[accordion][headerIndex] + 'px';

    // Set accordion content height to auto after 100ms in order to make it responsive.
    setTimeout(() => accordionContent.style.height = 'auto', 100);
  } else {
    // Store the scrollHeight of the accordion content.
    accordionContentHeights[accordion][headerIndex] = accordionContent.scrollHeight;
    currentHeader.firstElementChild.innerText = '+';

    // Set the accordion content height to the current scrollHeight as it's set to auto when this happens. Transitions won't play if the height is auto.
    accordionContent.style.height = accordionContentHeights[accordion][headerIndex] + 'px';

    // Set accordion content height to 0 after 10ms. The delay is necessary for the previous height change to take effect (otherwise it would still be auto and the transition wouldn't play).
    setTimeout(() => accordionContent.style.height = '0', 10);
  }

  accordionContent.classList.toggle('invisible');
};

// Add event listeners to accordion headers
const accordions = document.getElementsByClassName('accordion');

for (let i = 0; i < accordions.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  accordionContentHeights.push([]);
  const accordionHeaders = accordions[i].getElementsByClassName('accordion-header');
  const accordionContents = accordions[i].getElementsByClassName('accordion-content');

  for (let j = 0; j < accordionHeaders.length; j++) {if (window.CP.shouldStopExecution(1)) break;
    // Store all accordion content heights for later use (necessary for animating the height).
    accordionContentHeights[i].push(accordionContents[j].scrollHeight);

    accordionHeaders[j].addEventListener('click', () => {
      toggleAccordion(i, j);
    });

    // Make the contents invisible.
    accordionContents[j].style.height = '0px';
    accordionContents[j].classList.add('invisible');
  }

  // Add the transition class to the contents after 100ms so that the transition doesn't play when they are initially hidden.
  window.CP.exitedLoop(1);setTimeout(function () {
    for (let j = 0; j < accordionContents.length; j++) {if (window.CP.shouldStopExecution(2)) break;
      accordionContents[j].classList.add('transition');
    }window.CP.exitedLoop(2);
  }, 100);
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

10. By Velichko Konstantin

Made by Velichko Konstantin. Basic JavaScript accordions. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>n</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic'>
<style>
body {
  font-family: 'Open Sans', sans-serif;
}
.container {
  max-width: 800px;
  margin: auto;
}
.accordion {
  margin: 1em 0;
  padding: 0;
}
.accordion__item {
  padding: 0;
  list-style: none;
  margin-bottom: -1px;
}
.accordion__header {
  position: relative;
  color: #3d3d3d;
  font-size: 18px;
  line-height: 20px;
  padding: 15px 50px 15px 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: 150ms all ease-in-out 0s;
}
.accordion__header:hover {
  box-shadow: 0 1px 5px rgba(22,20,17,0.16);
}
.accordion__header:after {
  content: '';
  transition: 150ms all ease-in-out 0s;
  position: absolute;
  right: 20px;
  top: 19px;
  color: #535353;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-color: #535353;
  transform: rotate(45deg);
  transform-origin: 70% 70%;
}
.accordion__content {
  display: none;
  overflow: hidden;
}
.accordion__item_active .accordion__header {
  box-shadow: 0 1px 5px rgba(22,20,17,0.16);
}
.accordion__item_active .accordion__header:after {
  transform: rotate(225deg);
}
.accordion__item_active .accordion__content {
  display: block;
  padding: 20px 10px;
}
</style>
</head>
<body>
  <div class="container">
  <h1>Accoridon 1</h1>
  <ul class="accordion">
    <li class="accordion__item">
      <div class="accordion__header">Accordion item 1</div>
      <div class="accordion__content"> 
        <h2>Accordion item 1 content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
    <li class="accordion__item accordion__item_active">
      <div class="accordion__header">Accordion item 2</div>
      <div class="accordion__content">
        <h2>Accordion item 2 content</h2>
        <p>This accordion section open at page load by giving class .b-accordion__item_active</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
    <li class="accordion__item">
      <div class="accordion__header">Accordion item 3</div>
      <div class="accordion__content">
        <h2>Accordion item 3 content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
    <li class="accordion__item">
      <div class="accordion__header">Accordion item 4</div>
      <div class="accordion__content">
        <h2>Accordion item 4 content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
    <li class="accordion__item">
      <div class="accordion__header">Accordion item 5</div>
      <div class="accordion__content">
        <h2>Accordion item 5 content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
  </ul>
  <h1>Accoridon 2</h1>
  <ul class="accordion">
    <li class="accordion__item">
      <div class="accordion__header">Accordion item 1</div>
      <div class="accordion__content"> 
        <h2>Accordion item 1 content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
    <li class="accordion__item">
      <div class="accordion__header">Accordion item 2</div>
      <div class="accordion__content">
        <h2>Accordion item 2 content</h2>
        <p>This accordion section open at page load by giving class .b-accordion__item_active</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
    <li class="accordion__item">
      <div class="accordion__header">Accordion item 3</div>
      <div class="accordion__content">
        <h2>Accordion item 3 content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
    <li class="accordion__item">
      <div class="accordion__header">Accordion item 4</div>
      <div class="accordion__content">
        <h2>Accordion item 4 content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
    <li class="accordion__item">
      <div class="accordion__header">Accordion item 5</div>
      <div class="accordion__content">
        <h2>Accordion item 5 content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias pariatur, culpa, accusamus quibusdam quaerat consequatur consequuntur quo, tempore nihil dolorem hic iure itaque repellat! Odit iste quos repudiandae, pariatur officia!</p>
      </div>
    </li>
  </ul>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js'></script>
      <script>
'use strict';

(function () {

  document.addEventListener('DOMContentLoaded', function () {
    var allAccordions = document.querySelectorAll('.accordion');
    var animationDuration = 200;

    function open(item) {
      var content = item.querySelector('.accordion__content');

      item.classList.add('accordion__item_active');
      Velocity(content, 'slideDown', { duration: animationDuration });
    };

    function close(item) {
      var content = item.querySelector('.accordion__content');

      item.classList.remove('accordion__item_active');
      Velocity(content, 'slideUp', { duration: animationDuration });
    };

    function getActive(allItems) {
      var active = false;

      for (var i = 0; i < allItems.length; i++) {if (window.CP.shouldStopExecution(0)) break;
        if (allItems[i].classList.contains('accordion__item_active')) {
          return allItems[i];
        }
      }window.CP.exitedLoop(0);
      return active;
    };

    // Every accordion on page
    for (var i = 0; i < allAccordions.length; i++) {if (window.CP.shouldStopExecution(1)) break;
      var accordion = allAccordions[i];
      var allItems = accordion.querySelectorAll('.accordion__item');
      var activeItem = getActive(allItems);

      accordion.addEventListener('click', function (e) {

        // click on header
        if (e.target.classList.contains('accordion__header')) {
          var header = e.target;
          var item = header.parentElement;

          if (item.classList.contains('accordion__item_active')) {
            close(item);
          } else
          {
            activeItem = getActive(allItems);

            if (typeof activeItem == "object") {
              close(activeItem);
            }
            open(item);
          }
        }

      });

    }window.CP.exitedLoop(1);

  });

})();
    </script>
</body>
</html>

11. By Frederic

Made by Frederic. Accordion with shadow effect on click. 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">
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Mulish:[email protected];700&display=swap");
:root {
  --clr-head: hsl(246, 35%, 11%);
  --clr-body: hsl(248, 35%, 11%);
  box-sizing: border-box;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}

body {
  font-family: "Mulish", sans-serif;
  width: 100%;
  height: 100vh;
  font-size: 1.6rem;
  color: var(--clr-body);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #50155b;
}

.app {
  max-width: 66em;
  width: 100%;
  background-color: white;
  border-radius: 10px;
  position: relative;
  padding: 3em;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 2rem;
}

.app::before {
  content: "";
  position: absolute;
  top: -8rem;
  left: -8rem;
  width: 206px;
  height: 206px;
  background-color: #b4315d;
  z-index: -1;
}

.app::after {
  content: "";
  position: absolute;
  bottom: -8rem;
  right: -8rem;
  width: 206px;
  height: 206px;
  background: transparent;
  border-right: 3.5rem solid #b4315d;
  border-bottom: 3.5rem solid #b4315d;
  z-index: -1;
}

.app__head {
  margin-top: 2em;
}

.app__head h1 {
  font-size: clamp(3rem, 5vw, 3.6rem);
  font-weight: 700;
  width: 80%;
  line-height: 1.2;
}

.accordion {
  margin-bottom: 0.5em;
  max-width: 588px;
  border-radius: 3px;
  width: 100%;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.accordion.is-open {
  box-shadow: 0 18px 20px -10px rgba(80, 21, 91, 0.32);
  border-radius: 3px;
}

.accordion__header button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background-color: #fff;
  padding: 2em;
  text-align: left;
  outline: none;
}

.accordion__title {
  font-size: 1.8rem;
  /* font-size: clamp(); */
  font-weight: 400;
}

.accordion__icon {
  cursor: pointer;
}

.accordion .accordions__icon > * {
  width: 4rem;
}

.accordion .icon__plus {
  display: block;
}

.icon__minus {
  display: none;
}

.accordion.is-open .icon__minus {
  display: block;
}

.accordion.is-open .icon__plus {
  display: none;
}

.accordion__content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

.accordion__inner {
  max-width: 80%;
  width: 100%;
  padding: 1em 1.5em;
}

.accordion__inner p {
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 1em;
  color: var(--clr-body);
  opacity: 0.7;
}

@media (max-width: 768px) {
  .app {
    max-width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .app__head h1 {
    width: 90%;
  }

  .app::before {
    display: none;
  }

  .app::after {
    display: none;
  }
}
</style>
</head>
<body>
  <div class="app">
   <div class="app__head">
      <h1>text</h1>
   </div>
   <div class="app__content">
      <div class="accordion-container">
         <div class="accordion ">
            <header class="accordion__header">
               <p>
                  <button>
                     <span class="accordion__title">text</span>
                     <div class="accordion__icon">
                        <svg class="icon__plus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path d="M8 8h24v24H8z" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13v14m-7-7h14" />
                           </g>
                        </svg>
                        <svg class="icon__minus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.929" d="M11 19.5h18" />
                           </g>
                        </svg>
                     </div>
                  </button>
               </p>
            </header>
            <div class="accordion__content">
               <div class="accordion__inner">
                  <p>
                     text
                     <p>
                        text
                     </p>
                  </p>
               </div>
            </div>
         </div>
         <div class="accordion">
            <header class="accordion__header">
               <p>
                  <button>
                     <span class="accordion__title">text</span>
                     <div class="accordion__icon">
                        <svg class="icon__plus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path d="M8 8h24v24H8z" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13v14m-7-7h14" />
                           </g>
                        </svg>
                        <svg class="icon__minus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.929" d="M11 19.5h18" />
                           </g>
                        </svg>
                     </div>
                  </button>
               </p>
            </header>
            <div class="accordion__content ">
               <div class="accordion__inner">
                  <p>
                     text
                  </p>
               </div>
            </div>
         </div>
         <div class="accordion">
            <header class="accordion__header">
               <p>
                  <button>
                     <span class="accordion__title">text</span>
                     <div class="accordion__icon">
                        <svg class="icon__plus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path d="M8 8h24v24H8z" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13v14m-7-7h14" />
                           </g>
                        </svg>
                        <svg class="icon__minus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.929" d="M11 19.5h18" />
                           </g>
                        </svg>
                     </div>
                  </button>
               </p>
            </header>
            <div class="accordion__content">
               <div class="accordion__inner">
                  <p>
                     text
                  </p>
               </div>
            </div>
         </div>
         <div class="accordion">
            <header class="accordion__header">
               <p>
                  <button>
                     <span class="accordion__title">text</span>
                     <div class="accordion__icon">
                        <svg class="icon__plus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path d="M8 8h24v24H8z" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13v14m-7-7h14" />
                           </g>
                        </svg>
                        <svg class="icon__minus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.929" d="M11 19.5h18" />
                           </g>
                        </svg>
                     </div>
                  </button>
               </p>
            </header>
            <div class="accordion__content">
               <div class="accordion__inner">
                  <p>
                     text
                  </p>
               </div>
            </div>
         </div>
         <div class="accordion">
            <header class="accordion__header">
               <p>
                  <button>
                     <span class="accordion__title">text</span>
                     <div class="accordion__icon">
                        <svg class="icon__plus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path d="M8 8h24v24H8z" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13v14m-7-7h14" />
                           </g>
                        </svg>
                        <svg class="icon__minus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.929" d="M11 19.5h18" />
                           </g>
                        </svg>
                     </div>
                  </button>
               </p>
            </header>
            <div class="accordion__content">
               <div class="accordion__inner">
                  <p>
                     text

                  </p>
               </div>
            </div>
         </div>
         <div class="accordion">
            <header class="accordion__header">
               <p>
                  <button>
                     <span class="accordion__title">text</span>
                     <div class="accordion__icon">
                        <svg class="icon__plus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path d="M8 8h24v24H8z" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13v14m-7-7h14" />
                           </g>
                        </svg>
                        <svg class="icon__minus" xmlns="http://www.w3.org/2000/svg" width="40" height="40">
                           <g fill="none" fill-rule="evenodd">
                              <circle cx="20" cy="20" r="20" fill="#E5DDE7" opacity=".497" />
                              <path stroke="#DC094E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.929" d="M11 19.5h18" />
                           </g>
                        </svg>
                     </div>
                  </button>
               </p>
            </header>
            <div class="accordion__content">
               <div class="accordion__inner">
                  <p>
                      text
                  </p>
               </div>
            </div>
         </div>

      </div>
   </div>
</div>
      <script>
const accordionContainer = document.querySelector(".accordion-container");

// select accordion header
accordionContainer.addEventListener("click", e => {
  const accordionHeader = e.target.closest(".accordion__header");

  if (accordionHeader) {
    const accordion = accordionHeader.parentElement;
    const accordionContent = accordionHeader.nextElementSibling;
    const accordionInner = accordionContent.children[0];

    let height;

    if (accordion.classList.contains("is-open")) {
      height = 0;
    } else {
      height = accordionInner.getBoundingClientRect().height;
    }

    accordion.classList.toggle("is-open");
    accordionContent.style.height = `${height}px`;
  }
});
    </script>
</body>
</html>

12. By Programer

Made by Programer. Responsive JavaScript Accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css'>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];400;600&display=swap");

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

body {
  font-family: "Poppins";
  font-weight: 300;
  background-color: rgb(245, 245, 245);
}

.container {
  max-width: 1100px;
  padding: 0 1rem 3rem;
  margin: auto;
}

h1 {
  margin: 3rem 0;
  font-weight: 400;
  font-family: poppins;
}

.accordion-header {
  background-color: rgb(235, 235, 235);
  cursor: pointer;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  transition: all 0.4s ease-in-out;
}

.accordion-header h4 {
  font-size: 1rem;
  font-weight: 600;
}

.accordion-body {
  transition: all 0.35s ease-in-out;
  max-height: 0;
  overflow: hidden;
  background-color: rgb(252, 252, 252);
}

.accordion-body p {
  padding: 1rem 1.5rem;
  line-height: 1.8;
}

.accordion + .accordion {
  margin-top: 1rem;
}

.accordion-icon {
  transition: transform 0.4s ease-in-out;
}

.accordion.active .accordion-header {
  background-color: rgb(40, 134, 114);
  color: white;
}

.accordion.active .accordion-icon {
  transform: rotate(-180deg);
}
</style>
</head>
<body>
  <body>
    <div class="container">
      <h1>Accordion</h1>

      <div class="accordions-wrapper">
        <div class="accordion">
          <div class="accordion-header">
            <h4>Accordion #1</h4>
            <i class="la la-angle-up accordion-icon"></i>
          </div>

          <div class="accordion-body">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
              eaque sint distinctio, cupiditate placeat iusto perferendis magnam
              possimus sapiente! Delectus aspernatur numquam laborum impedit
              corporis.
            </p>
          </div>
        </div>

        <div class="accordion">
          <div class="accordion-header">
            <h4>Accordion #2</h4>
            <i class="la la-angle-up accordion-icon"></i>
          </div>

          <div class="accordion-body">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
              eaque sint distinctio, cupiditate placeat iusto perferendis magnam
              possimus sapiente! Delectus aspernatur numquam laborum impedit
              corporis.
            </p>
          </div>
        </div>

        <div class="accordion">
          <div class="accordion-header">
            <h4>Accordion #3</h4>
            <i class="la la-angle-up accordion-icon"></i>
          </div>

          <div class="accordion-body">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
              eaque sint distinctio, cupiditate placeat iusto perferendis magnam
              possimus sapiente! Delectus aspernatur numquam laborum impedit
              corporis.
            </p>
          </div>
        </div>
      </div>
    </div>
      <script>
const accordionHeaders = document.querySelectorAll(".accordion-header");

ActivatingFirstAccordion();

function ActivatingFirstAccordion() {
  accordionHeaders[0].parentElement.classList.add("active");
  accordionHeaders[0].nextElementSibling.style.maxHeight =
  accordionHeaders[0].nextElementSibling.scrollHeight + "px";
}

function toggleActiveAccordion(e, header) {
  const activeAccordion = document.querySelector(".accordion.active");
  const clickedAccordion = header.parentElement;
  const accordionBody = header.nextElementSibling;

  if (activeAccordion && activeAccordion != clickedAccordion) {
    activeAccordion.querySelector(".accordion-body").style.maxHeight = 0;
    activeAccordion.classList.remove("active");
  }

  clickedAccordion.classList.toggle("active");

  if (clickedAccordion.classList.contains("active")) {
    accordionBody.style.maxHeight = accordionBody.scrollHeight + "px";
  } else {
    accordionBody.style.maxHeight = 0;
  }
}

accordionHeaders.forEach(function (header) {
  header.addEventListener("click", function (event) {
    toggleActiveAccordion(event, header);
  });
});

function resizeActiveAccordionBody() {
  const activeAccordionBody = document.querySelector(
  ".accordion.active .accordion-body");

  if (activeAccordionBody)
  activeAccordionBody.style.maxHeight =
  activeAccordionBody.scrollHeight + "px";
}

window.addEventListener("resize", function () {
  resizeActiveAccordionBody();
});
    </script>
</body>
</html>

13. By LukyVJ

Made by LukyVJ. Metro Style Accordion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);
/*
*/
p{
  font-family: helvetica;
  color:#fff;
}
p > a{
  color:#ea2d49;
  text-decoration: none;
}
body{
max-width: 240px;
	margin: 100px auto 50px auto;
	background: #1f1f1f;
	text-align: center;
}
ul{
list-style:none;
margin:0;
padding:0;
text-align:left;
font-family: Helvetica;
}
body > ul{
margin-bottom:300px;
border:1px solid #222;
}
body > ul > li{
position:relative;
}
body > ul > li > a{
display:block;
outline:0;
height:20px;
padding:10px;
text-decoration:none;
color:#fff;
background:#ea2d49;
border-bottom:1px solid #222;
font-family:Lato;
font-weight:300;
-webkit-font-smoothing:antialiased;
text-transform:uppercase;
font-size:14px;
}
body > ul > li > a > i{
display:block;
width:45px;
height:30px;
float:left;
}
body > ul > li:nth-child(1) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_friend.png)no-repeat top left;
/*background-size*/
-webkit-background-size:40%;
   -moz-background-size:40%;
     -o-background-size:40%;
        background-size:40%;
background-position:5px 3px;
}
body > ul > li:nth-child(2) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_video.png)no-repeat top left;
/*background-size*/
-webkit-background-size:40%;
   -moz-background-size:40%;
     -o-background-size:40%;
        background-size:40%;
background-position:5px 3px;
}
body > ul > li:nth-child(3) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_gallery.png)no-repeat top left;
/*background-size*/
-webkit-background-size:40%;
   -moz-background-size:40%;
     -o-background-size:40%;
        background-size:40%;
background-position:5px 3px;
}
body > ul > li:nth-child(4) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_podcast.png)no-repeat top left;
/*background-size*/
-webkit-background-size:40%;
   -moz-background-size:40%;
     -o-background-size:40%;
        background-size:40%;
background-position:5px 3px;
}
body > ul > li:nth-child(5) > a > i{
background:url(http://web-gate.fr/images/republicof3/icon_bolt.png)no-repeat top left;
/*background-size*/
-webkit-background-size:20%;
   -moz-background-size:20%;
     -o-background-size:20%;
        background-size:20%;
background-position:10px 3px;
}
body > ul > li > ul{
counter-reset:items;
height:auto;
overflow:hidden;
background:#fff;
color:#ec2b48;
width:100%;
}
body > ul > li > ul > li{
counter-increment:items;
padding:1em 1.3em;
border-bottom:1px solid #DDD;
font-size:12px;
cursor:pointer;
}
body > ul > li > ul > li:hover{
background:#f4F4F4;
}
body > ul > li:after{
content:counter(items);
font-size:14px;
position:absolute;
right:10px;
top:15px;
background:#c0273c;
height:30px;
padding:5px 20px;
margin:-15px -10px;
color:white;
text-indent:0;
text-align:center;
line-height:2;
/*box-shadow*/
-webkit-box-shadow:inset 4px 0 8px rgba();
   -moz-box-shadow:inset 4px 0 8px rgba();
        box-shadow:inset 4px 0 8px rgba();
}
body > ul > li > ul > li:after{
content:counter(items);
font-size:0.857em;
background:#f4f5f4;
height:100%;
margin:-27px 174px;
display:block;
float:left;
color:#c0273c;
text-indent:0;
text-align:center;
font-size:14px;
line-height:2.5;
border-top:1px solid #DDD;
height:38px;
width:48px;
}
.active{
background:#c0273c;
}
.closed{
height:0;
}
</style>
</head>
<body>
  <p>Proudly propulsed by <a href="http://republicof3.com">Republicof3</a> And <a href="http://lucasbonomi.com">@LukyVj</a></p>

<ul>
	<li>
		<a href="#"><i></i>Friends</a>
		<ul class="closed">
			<li>The Departed</li>
			<li>Sherlock Holmes</li>
			<li>Sin City</li>
			<li>Jarhead</li>
			<li>Jurassic Park</li>
			<li>Machete</li>
		</ul>
	</li>
	<li>
		<a href="#"><i></i>Videos</a>
		<ul class="closed">
			<li>Dexter</li>
			<li>Mad Men</li>
			<li>Breaking Bad</li>
			<li>Fringe</li>
			<li>Game of Thrones</li>
			<li>Californication</li>
			<li>Homeland</li>
			<li>Boardwalk Empire</li>
		</ul>
	</li>
	<li>
		<a href="#"><i></i>Galleries</a>
		<ul class="closed">
			<li>Manga Artworks</li>
			<li>Anime Cosplay</li>
			<li>Skyrim Cosplay</li>
		</ul>
	</li>
	<li>
		<a href="#"><i></i>Podcasts</a>
		<ul class="closed">
			<li>Grand Theft Auto</li>
			<li>Half-Life</li>
			<li>Super Mario Galaxy</li>
			<li>Resident Evil</li>
		</ul>
	</li>
	<li>
		<a href="#"><i></i>Bolts</a> 
		<ul class="closed">
			<li>Grand Theft Auto</li>
			<li>Half-Life</li>
			<li>Super Mario Galaxy</li>
			<li>Resident Evil</li>
		</ul>
	</li>
</ul>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
      <script>
$(function () {
  $("a").bind('click', function () {
    var _this = $(this);

    // Expand the current link
    _this.toggleClass('active', 5);
    _this.next().toggleClass('closed', 500);
    // Contract the others and set off the 'active' state.
    $("a").not(_this).each(function () {
      $(this).next().addClass('closed', 500);
      $(this).removeClass('active', 5);
    });
  });
});
    </script>
</body>
</html>

14. By Robot Balloon

Made by Robot Balloon. Simple accordion with toggle indicator. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
body {
    background: url(https://subtlepatterns.com/patterns/black_lozenge.png) #000;
    padding-top: 100px;
}

h1 {
    color: #fff;
    text-align: center;
}

p {
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}

img {
    width: 100%;
    height: auto;
}

a {
    color: #fff;
}
.hideContentWrap {
    width: 600px;
    margin: 0 auto 10px;
}

.hideContentHeader {
    display: block;
    width: 90%;
    color: #fff;
    padding: 1%;
    margin: 0 auto;
    background: #FC4349;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.hideContentHeader.active {
    color: #000;
    background: #6DBCDB;
}

h4.hideContentHeader:hover {
    cursor: pointer;
}

.hideContent {
    display: none;
    width: 92%;
    height: auto;
    margin: 0 auto;
}

.indicator {
    display: inline-block;
    padding: 5px;
    text-align: center;
    font-size: 20px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.indicator.rotate {
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
/* IE 9 */
    -webkit-transform: rotate(45deg);
/* Safari and Chrome */
}
</style>
</head>
<body>
  <!-- Start of Template --> 
<div class="hideContentWrap">
        <h4 class="hideContentHeader">Some Hidden Content</h4>
        <div class="hideContent">
        <img src=
        "https://xcattx.com/wp-content/uploads/2022/07/xcattx.com_.webp"></div>
 </div>
<!-- End of Template --> 
  
 <div class="hideContentWrap">
        <h4 class="hideContentHeader">More Hidden Content</h4>
        <div class="hideContent">
        <img src=
        "https://xcattx.com/wp-content/uploads/2022/07/xcattx.com_.webp"></div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  $('.hideContentHeader').prepend('<span class="indicator">+</span> ');
  $('.hideContentHeader').click(function () {
    $(this).parent().find('.hideContent').slideToggle("slow");
  });
  $('.hideContentHeader').click(function () {
    $(this).toggleClass("active");
  });
  $('.hideContentHeader').click(function () {
    $(this).find('.indicator').toggleClass("rotate");
  });
});
    </script>
</body>
</html>

15. By ZaidMarrie

Made by ZaidMarrie. Source

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

<style>
/* ======================== */
/* Global Styles            */
/* ======================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
    color: rgb(32, 32, 32);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    min-height: 100vh;
    background-color: #d2f5ff;
    display: grid;
    place-items: center;
}

.container {
    margin: 0 auto;
    max-width: 50em;
    padding: min(2rem, 4.5vmax);
}

.flow > * + * { /* Adds space to all direct children except the 1st */
    margin-top: 0.75rem;
}

.title {
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    margin-top: 0;
}

/* ======================== */
/* Accordion Styles         */
/* ======================== */

.accordion {
    margin: 0 auto;
    max-width: 600px;
}

.accordion__item {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
                0 2px 4px rgba(0, 0, 0, 0.1),
                0 3px 5px rgba(0, 0, 0, 0.1);
}

/* Accordion Trigger */
.accordion__item--trigger {
    cursor: pointer;
    color: #fff;
    font-size: 1.125rem;
    margin: 0;
    padding: 0.75rem 1rem;
    background-color: hsl(0, 0%, 39%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
                0 2px 3px rgba(0, 0, 0, 0.1),
                0 3px 5px rgba(0, 0, 0, 0.1);

    display: flex;
    align-items: center;
    justify-content: space-between;
}
    .accordion__item--trigger::after {
        content: '+';
        font-weight: 700;
        font-size: 1.5rem;
        display: block;
        margin-left: 0.75rem;
    }
    .accordion__item--trigger[aria-expanded="true"]::after {
        content: '-';
    }

/* Accordion Panel */
.accordion__item--panel {
    height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: rgba(230, 230, 230, 0.75);
    transition: height 400ms ease-in-out, opacity 350ms linear;

    display: flex;
    align-items: center;
}
    .accordion__item--panel > p {
        margin: 0;
        padding: 1rem;
        font-size: 0.85rem;
    }

.accordion__item--trigger[aria-expanded="true"] + .accordion__item--panel {
    height: 4.6875rem;
    opacity: 1;
}
</style>
</head>
<body>
  <div class="accordion container flow">
    
    <h1 class="title">Text</h1>

    <div class="accordion__item">
        <h2 id="accordion__trigger-1" class="accordion__item--trigger" aria-expanded="false" aria-controls="accordion__panel-1">
            Lorem
        </h2>
        <div id="accordion__panel-1" class="accordion__item--panel" role="region" aria-labelledby="accordion__trigger-1">
            <p>Lorem</p>
        </div>
    </div>

    <div class="accordion__item">
        <h2 id="accordion__trigger-2" class="accordion__item--trigger" aria-expanded="false" aria-controls="accordion__panel-2">
            Lorem
        </h2>
        <div id="accordion__panel-2" class="accordion__item--panel" role="region" aria-labelledby="accordion__trigger-2">
            <p>Lorem</p>
        </div>
    </div>

    <div class="accordion__item">
        <h2 id="accordion__trigger-3" class="accordion__item--trigger" aria-expanded="false" aria-controls="accordion__panel-3">
            Lorem
        </h2>
        <div id="accordion__panel-3" class="accordion__item--panel" role="region" aria-labelledby="accordion__trigger-3">
            <p>Lorem</p>
        </div>
    </div>

    <div class="accordion__item">
        <h2 id="accordion__trigger-4" class="accordion__item--trigger" aria-expanded="false" aria-controls="accordion__panel-4">
            Lorem
        </h2>
        <div id="accordion__panel-4" class="accordion__item--panel" role="region" aria-labelledby="accordion__trigger-4">
            <p>Lorem</p>
        </div>
    </div>

    <div class="accordion__item">
        <h2 id="accordion__trigger-5" class="accordion__item--trigger" aria-expanded="false" aria-controls="accordion__panel-5">Lorem
        </h2>
        <div id="accordion__panel-5" class="accordion__item--panel" role="region" aria-labelledby="accordion__trigger-5">
            <p>Lorem</p>
        </div>
    </div>

</div>
      <script>
const accordionTriggers = document.querySelectorAll('.accordion__item--trigger');

accordionTriggers.forEach(trigger => {
  trigger.addEventListener('click', expandAccordion);
});

function expandAccordion(event) {
  const { target: targetElement } = event;
  const isPanelExpanded = targetElement.getAttribute('aria-expanded');

  collapseAllAccordions();

  if (isPanelExpanded === "false") {
    targetElement.setAttribute('aria-expanded', true);
  } else {
    targetElement.setAttribute('aria-expanded', false);
  }
}

function collapseAllAccordions() {
  accordionTriggers.forEach(trigger => {
    trigger.setAttribute('aria-expanded', false);
  });
}
    </script>
</body>
</html>