accordion

custom.js

'use strict'

const accordion = document.getElementsByClassName('accordion')
const content = document.getElementsByClassName('content')

// Loop through .content blocks and set max height to hide.
for (let i = 0; i < content.length; i++) {
  content[i].style.maxHeight = 0
}

for (let i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener('click', showAccordion)
}

function showAccordion() {
  // Check to see if content is open ( maxHeight === 1000px)
  if (this.nextElementSibling.style.maxHeight === '1000px') {
    // Loop through .content blocks and set max height to hide.
    for (let i = 0; i < content.length; i++) {
      content[i].style.maxHeight = 0
    }
    // Removes active class of each accordion button
    for (let i = 0; i < accordion.length; i++) {
      accordion[i].classList.remove('active')
    }
  } else { // Else if content is closed (maxHeight !== 1000px)
    // Loop through .content blocks and set max height to hide.
    for (let i = 0; i < content.length; i++) {
      content[i].style.maxHeight = 0
    }
    // Removes active class of each accordion button
    for (let i = 0; i < accordion.length; i++) {
      accordion[i].classList.remove('active')
    }
    // Adds active class to accordion button clicked on (this)
    this.classList.add('active')
    // Opens (sibling), content beneat through max-height CSS
    this.nextElementSibling.style.maxHeight = '1000px'
  } // End if else
}

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layout</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    <h1>Site Name</h1>
  </header>
  <div class="wrapper">
    <div class="container">
      <button class="accordion">1st Item</button>
      <div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eligendi corporis debitis consectetur rerum esse, nemo illum doloribus animi, vero et, molestiae. In ducimus tempore amet commodi explicabo, vitae totam.</p></div>
      <button class="accordion">2nd Item</button>
      <div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eligendi corporis debitis consectetur rerum esse, nemo illum doloribus animi, vero et, molestiae. In ducimus tempore amet commodi explicabo, vitae totam.</p></div>
      <button class="accordion">3rd Item</button>
      <div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eligendi corporis debitis consectetur rerum esse, nemo illum doloribus animi, vero et, molestiae. In ducimus tempore amet commodi explicabo, vitae totam.</p></div>
    </div>
    <!-- .container-->
  </div>
  <!-- .wrapper-->
  <footer>
    <small><a href="https://opensource.org/licenses/MIT">MIT</a></small>
  </footer>
  <script src="custom.js"></script>
</body>

</html>

styles.css

body {
  background: #eeeeee;
  font-size: 16px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin: 0;
}

a {
  color: crimson;
  text-decoration: none;
}

a:hover {
  color: red;
}


/* Layout
------------------------------------------*/

header,
.container,
footer {
  margin: 0 auto;
  width: 88%;
  max-width: 1080px;
}

.wrapper {
  padding: 1em 0;
  background: #ffffff;
}

/* Accordion
------------------------------------------*/

.accordion {
  font-size: 1em;
  padding: .5em 1em;
  background: #eeeeee;
  cursor:pointer;
  width:100%;
  border:none;
  outline:none;
  margin-bottom:.2em;
}

.accordion:hover {
  background:pink;
}

.content {
  /* max-height: 0; */
  overflow: hidden;
  transition: .6s;
}

.accordion:after {
  content: "\02795";
  font-size: .8em;
  float:left;
}

.active:after {
  content:"\2796";
}

.active:hover {
  cursor:default;
  background: #eeeeee;
}