Tutorials Themes Mods Inspiration Collections Theme Store Mod Store SMF HTML CSS geek Dani UX jane Lifestyle LimeStone

FAQ Accordion

Written by Mick in Tutorials on 02 Nov 2020



Let's do a very simple FAQ page with HTML and CSS entries. Simply create an HTML page using your favorite portal. You can add the link to the menu via Subs.php and have a cool looking FAQ page.


The CSS, put this chunk at the very end of your theme's CSS file.
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#card {
    background: #fff;
    color: #333;
    margin: 10rem auto;
    width: 90%;
    max-width: 1200px;
    min-height: 30rem;
    border-radius: 2rem;
}
#hero {
    display: flex;
    justify-content: center;
    transform: translateY(-55%);
}
#hero .img {
    filter: drop-shadow(0rem 1.5rem rgba(0,0,0,0.1));
    transition: 0.3s ease-out;
}
#card:hover .img {
    filter: drop-shadow(0rem 2.5rem rgba(0,0,0,0.1));
}
#title {
    text-align: center;
    font-size: 5rem;
    padding: 1rem;
}
#acc-container {
    padding: 4rem 2rem;
}
#acc-btn {
    width: 100%;
    padding: 1.6rem 2rem;
    font-size: 1.6rem;
    cursor: pointer;
    background: inherit;
    border: none;
    outline: none;
    text-align: left;
    transition: all 0.5s linear;
}
#acc-btn:after {
    content: "\27A4";
    color: #fa8d0c;
    float: right;
    transition: all 0.3s linear;
}
#acc-btn.is-open:after {
    transform: rotate(90deg);
}
#acc-btn:hover, #acc-btn.is-open {
    color: #000;
    font-weight: bold;
}
#acc-content {
    max-height: 0;
    color: rgba(0,0,0,0.75);
    font-size: 1.5rem;
    margin: 0 2rem;
    padding-left: 1rem;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    border-bottom: 1px solid #ccc;
}

The HTML, create an HTML page using your portal.
<div id="card">
  <div id="hero">
    <img src="https://raw.githubusercontent.com/ArtemPonomarenko/FAQ-Accordion/main/images/illustration-woman-online-mobile.svg" alt="section image" class="img">
  </div>
  <h2 id="title">FAQ</h2>
  <div id="acc-container">
    <button id="acc-btn">What is the definition of a will?</button>
    <div id="acc-content">
      <p>
        It is a dead giveaway.
      </p>
    </div>
    <button id="acc-btn">
      What happens to chemists when they die?
    </button>
    <div id="acc-content">
      <p>
        We barium [bury them].
      </p>
    </div>
    <button id="acc-btn">
      Why does the leopard find it difficult to hide and stalk?
    </button>
    <div id="acc-content">
      <p>
        Because he is spotted always.
      </p>
    </div>
    <button id="acc-btn">
      What kind of key opens a banana?
    </button>
    <div id="acc-content">
      <p>A monkey. 🙈</p>
    </div>

    <button id="acc-btn">
      Where does a tree store it's stuff?
    </button>
    <div id="acc-content">
      <p>In it's Trunk.</p>
    </div>
    <button id="acc-btn">
      What dog is known for its punctuality?
    </button>
    <div id="acc-content">
      <p>The watch-dog 🐕</p>
    </div>
    <button id="acc-btn">
      Name a thing that has four wheels and flies?
    </button>
    <div id="acc-content">
      <p>The garbage truck, of course.</p>
    </div>
    <button id="acc-btn">
      Why was everyone so tired on the First of April?
    </button>
    <div id="acc-content">
      <p>Because they had just completed a March of 31 days.</p>
    </div>
  </div>
</div>

The script, to be put below the 'body' in index.template.php
<script>
const btns = document.querySelectorAll("#acc-btn");
// fn
function accordion() {
  // this = the btn | icon & bg changed
  this.classList.toggle("is-open");
  // the acc-content
  const content = this.nextElementSibling;
  // IF open, close | else open
  if (content.style.maxHeight) content.style.maxHeight = null;
  else content.style.maxHeight = content.scrollHeight + "px";
}
// event
btns.forEach((el) => el.addEventListener("click", accordion));
</script>

Reference: FAQ Accordion
Mick

is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.


0 Comments

Get more stuff like this