JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<footer class="footer">
      <p>Questions? Call 1-866-579-7172</p>
      <div class="footer-cols">
        <div class="accordion_section">
          <h3 class="accordion">FAQ</h3>
          <ul>
            <li><a href="#">Investor Relations</a></li>
            <li><a href="#">Ways To Watch</a></li>
            <li><a href="#">Corporate Information</a></li>
            <li><a href="#">Netflix Originals</a></li>
          </ul>
        </div>
        <div class="accordion_section">
          <h3 class="accordion">Help Center</h3>
          <ul>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Terms Of Use</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>
        <div class="accordion_section">
          <h3 class="accordion">Account</h3>
          <ul>
            <li><a href="#">Redeem Gift Cards</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Speed Test</a></li>
          </ul>
        </div>
        <div class="accordion_section">
          <h3 class="accordion">Media Center</h3>
          <ul>
            <li><a href="#">Buy Gift Cards</a></li>
            <li><a href="#">Cookie Preferences</a></li>
            <li><a href="#">Legal Notices</a></li>
          </ul>
        </div>
      </div>
    </footer>

CSS

.footer {
  max-width: 100%;
  margin: 1.3rem;
  color: #999;
  font-size: 0.9rem;
  }
  
  p {
    margin-bottom: 1.5rem;
  }
  
.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
}

.accordion::after {
  content: "\002B";
  color: #999;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
          
.active::after {
  content: "\2212";
}
        
        ul {
          border-bottom: 1px solid #999;
          max-height: 0;
          overflow: hidden;
          }
          .show {
            max-height: initial;
          }
          li {
            line-height: 1.9;
            padding-bottom: 0.5rem;
            list-style:none;
          }
          a {
            color: #999;
            font-size: 0.9rem;
            text-decoration:none;
          }

JavaScript

// Accordions
const accordions = document.querySelectorAll(".accordion");
const lists = document.querySelectorAll("ul");

function activate(e) {
	
  let currentAccordion = e.currentTarget;
  let currentList = currentAccordion.nextElementSibling;
  closeOthers(currentAccordion, currentList );
  currentAccordion.classList.toggle("active");
  currentList.classList.toggle("show");
}

accordions.forEach(acc => acc.addEventListener("click", activate));

function closeOthers(currentAcc, currentList){
  accordions.forEach(acc => {
  	if(currentAcc != acc) acc.classList.remove("active")
    var list = acc.nextElementSibling;
    if(currentList != list) list.classList.remove("show")
  });
}