Ideas

1 VOTE

Accordion Element for FAQ's or Q&A's

I would love to be able to create an accordion element on a FAQ or Q&A page so parents interested in our program can go there for more information. The accordion element is create to help prevent a long or cluttered page and be clean and professional looking. 

  • Guest
  • Sep 6 2018
Frequency Weekly
Which sport(s) does this apply to: Basketball, Baseball/Softball, Football, Gymnastics, Lacrosse, Rugby, Ice Hockey, Soccer, Volleyball, Wrestling, Baseball, Softball, Canadian Football
Organization type Association/Club
  • Attach files
  • Guest commented
    September 06, 2018 20:27

    Found a way to solve it temporarily at least. Post the HTML code below in the "Code" element and just change the colors as needed etc. 

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .accordion {
    background-color: #d00e0e;
    color: #ffffff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    }
    .active, .accordion:hover {
    background-color: #ccc;
    }
    .panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <h2>Frequently Asked Questions</h2>
    <p>
    </p>
    <button class="accordion">Q: 1</button>
    <div class="panel">
    <p>A: 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>
    <p>
    </p>
    <button class="accordion">Q: 2</button>
    <div class="panel">
    <p>A: 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>
    <p>
    </p>
    <button class="accordion">Q: 3</button>
    <div class="panel">
    <p>A: 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>
    <p>
    </p>
    <button class="accordion">Q: 4</button>
    <div class="panel">
    <p>A: 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>
    <p>
    </p>
    <button class="accordion">Q: 5</button>
    <div class="panel">
    <p>A: 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>
    <p>
    </p>
    <button class="accordion">Q: 6</button>
    <div class="panel">
    <p>A: 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>
    <p>
    </p>
    <button class="accordion">Q: 7</button>
    <div class="panel">
    <p>A: 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>
    <p>
    </p>
    <button class="accordion">Q: 8</button>
    <div class="panel">
    <p>A: 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>
    <p>
    </p>
    <button class="accordion">Q: 9</button>
    <div class="panel">
    <p>A: 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>
    <p>
    </p>
    <button class="accordion">Q: 10</button>
    <div class="panel">
    <p>A: 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>
    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;
    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
    panel.style.display = "none";
    } else {
    panel.style.display = "block";
    }
    });
    }
    </script>
    </body>
    </html>