Simple Accordion Display

INFORMATION & CODE

Simple Accordion Display

What The Code Does

This code provides a functional interactive UI component known as an accordion, which allows users to expand and collapse sections of content to save space on a webpage. The user interface consists of clickable header buttons labeled "Subject 1," "Subject 2," and "Subject 3," each paired with an adjacent content box containing text paragraphs. Visually, the accordion elements are styled to be centered, responsive up to 600 pixels wide, and enhanced with plus (➕) and minus (➖) icons that dynamically change to indicate whether a section is currently collapsed or expanded.

How The Code Works

The mechanism relies on a combination of HTML structure, CSS styling, and JavaScript logic to operate smoothly. In the CSS stylesheet, the content boxes (.acc_box) are initially hidden using display: none;, and the pseudo-element .accordion:after handles the toggle icons. The JavaScript code loops through all elements with the .accordion class and attaches a "click" event listener to each one. When a button is clicked, the script toggles an "active" CSS class on the button (which swaps the plus icon for a minus icon) and checks the display property of the immediately following sibling element (nextElementSibling), switching it between block (visible) and none (hidden).

How to Use The Code

To use this code, you need to split it into three separate files within the same directory: an HTML file containing the markup, and named index.html, a CSS file named styles.css containing the design rules, and a JavaScript file named scripts.js containing the interactivity logic. Note that while the HTML file includes a link to the jQuery library in the <head>, the actual script relies entirely on vanilla JavaScript and does not require jQuery to function. Once set up, simply open the HTML file in any web browser, and clicking the accordion buttons will seamlessly reveal or conceal the hidden text content beneath them.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Accordion</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  </head>
  <body>
    <button class="accordion">Subject 1</button>
    <div class="acc_box">
      <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.
      </p>
    </div>
    <button class="accordion">Subject 2</button>
    <div class="acc_box">
      <p>Lorem ipsum dolor sit amet, illum definitiones nisi ut no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui           causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum           no molestiae voluptatibus.
      </p>
    </div>
    <button class="accordion">Subject 3</button>
    <div class="acc_box">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas             odio, vitae scelerisque enim ligule venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce             luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
      </p>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                      .accordion {
        position: relative;
        top: 0;
        left: 50%;
        transform: translatex(-50%);
        display: block;
        width: 100%;
        max-width: 600px;
        padding: 10px;
        background-color: #dddddd;
        border: 1px solid #aaaaaa;
        font-size:18px;
        font-weight: 700;
      }
      .acc_box {
        position: relative;
        top: 0px;
        display: none;
        width: 100%;
        max-width: 600px;
        padding: 10px;
        margin: auto;
        background-color: #efefef;
        border: 1px solid #aaaaaa;
        border-top: 0;
        border-bottom: 0;
        text-align: justify;
      }
      .acc_box:last-child {
        border: 1px solid #aaaaaa;
        border-top: 0;
      }
      
      .accordion:after{
        content: '➕';
        font-size: 15px;
        color: #ff7000;
        float: right;
        margin-left: 5px;
      }

      .accordion.active:after {
        content: "➖";
      }

JAVASCRIPT


                      const acc = document.querySelectorAll(".accordion");
      var i;
      
      for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
          this.classList.toggle("active");
          var accbox = this.nextElementSibling;
          if (accbox.style.display === "block") {
            accbox.style.display = "none";
          }else{
            accbox.style.display = "block";
          }
        });
      }

PREVIEW

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.

Lorem ipsum dolor sit amet, illum definitiones nisi ut no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligule venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

MENU

INFORMATION & CODE