JavaScript Accordion Component Project

Hello, developers in this tutorial you are going to learn how to create a JavaScipt Accordion Component Project. Accordions on a web page help in hiding and displaying any content of data in a particular section of a web page. In other words, JavaScript Accordion Component Project uses a display property of CSS which is set for the content to none, and with the help of JavaScript, this display property is converted to block on click of the particular panel of section.

What is Accordion in JavaScript

JavaScript Accordion helps in hiding and displaying any content of data such as any text or images. It basically contains some pannels with headings in it and upon clicking on those panels data is shown, which is hidden in that that pannel content.

Upon click of any panel, the panel expands and shows the data which is hidden and if the panel is clicked again then the panel collapses and data is hidden again.

How To Write JavaScript Accordion Component Project

HTML Structure Of Page

  • First, create a .HTML file in which you have to make 3 sections i.e. ‘section1′,’section2’,and ‘section3’.
  • Then you have to add content for every section respectively. Here in this example, Lorem content is used.
  • Note: Write the Section names in the Button tag and its content in the P tag of a div element.
  • Now you have to add classes to the button tag and the div tags.
  • For Example:
<button class="acc">Sec1 SuperComputer</button>
  <div class="panel">
    <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

CSS Design Of Page

  • In CSS designing first, you need to style acc class, content class, and p tag.
  • In acc, style the buttons that are used to open and close the accordion panel. After that in the p tag, the font style is set for the text.
  • Most importantly in the content class name, you need to set the display property to none so that the content is hidden on the web page.
  • Now you have to style an active class. So to do that add a background color to the button.
  •  Now you have to use the style property ‘after’ with respect to the accordion. It makes ‘+’ and ‘-‘ sign on the right side of the panel.
<style>
  
    .acc {
        background-color: grey;
        color: #FFF;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: 1px solid white;
        outline: none;
        transition: 0.4s;
        font-family: 'Times New Roman', Times, serif;
        font-size: medium;
    }

    
    .active, .acc:hover {
        background-color: gainsboro;
    }

    
    .content {
        padding: 0 18px;
        background-color: white;
        display: none;
        overflow: hidden;
    }

    p{
      font-family: cursive; 
    }

    .acc:after {
        content: "\02795";/* + sign */
        font-size: 16px;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2796";/* - sign */
    }
  </style>

JavaScript Code: accordion

  • First, you need to create a variable called ‘accdn’ that will store the collection of all elements in the document with the accordion class name. var accdn = document.getElementsByClassName(“acc”);
  • After that, you need to create a for loop from  i=0 to accdn.length.
  • Now you need to add an EventListener which will work on the click of the button(panel) and you need to write classList.toggle and write the active class in it. To clarify this toggle method toggle between adding and removing the “active” class. This active class is basically used to highlight/change the color of the button.
  • Now you need to create a variable called content and use the syntax this.nextElementSibling that will return the next sibling(‘content’) as the main selected property and store it in the variable.
  • Further, you just need to write the if-else condition block within which you need to check that if the content style display is set to block or not. If the content style display is set to block then display it none else if the display property is none then set it to block.

Example code for JavaScript

<script type="text/javascript">
    var accdn = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < accdn.length; i++) {
        accdn[i].addEventListener("click", function() {
        
             this.classList.toggle("active");

            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    }
  </script>


Source Code For The Accordion Project

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Accordion JAVASCRIPT</title>
  <meta charset="utf-8">

  
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
  
    .acc {
        background-color: grey;
        color: #FFF;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: 1px solid white;
        outline: none;
        transition: 0.4s;
        font-family: 'Times New Roman', Times, serif;
        font-size: medium;
    }

    
    .active, .acc:hover {
        background-color: gainsboro;
    }

    
    .content {
        padding: 0 18px;
        background-color: white;
        display: none;
        overflow: hidden;
    }

    p{
      font-family: cursive; 
    }

    .acc:after {
        content: '\02795';
        font-size: 16px;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2796";
    }
  </style>
</head>
<body><h2 style="text-align: center;">Types Of Computer</h2>
  <button class="acc">Sec1 SuperComputer</button>
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, illo optio. Amet quae officiis magnam perspiciatis dolores sunt, earum consequatur nesciunt. Repellat, provident non. Dolorem veritatis impedit magnam aspernatur illo omnis atque, porro ullam nulla soluta ex, doloremque necessitatibus earum!</p>
  </div>

  <button class="acc">Sec2 MainframeComputer</button>
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, consequatur vitae beatae quibusdam voluptate sit provident tenetur nostrum debitis, sint, illum amet facere rerum facilis? Vero ullam nostrum officia pariatur ducimus laborum culpa, aliquid nihil sequi et? Minima, molestias ipsam.</p>
  </div>

  <button class="acc">Sec3 MiniComputer</button>
  <div class="content">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi ipsum illo molestias alias natus consequuntur magnam harum aspernatur libero nam, aliquid officiis vel nesciunt ut asperiores perferendis ex, facere iure quo necessitatibus adipisci. Tempore error consequuntur possimus excepturi, voluptas facere.</p>
  </div>

  <script type="text/javascript">
    var accdn = document.getElementsByClassName("acc");
    var i;

    for (i = 0; i < accdn.length; i++) {
        accdn[i].addEventListener("click", function() {
        
             this.classList.toggle("active");

            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    }
  </script>
</body>
</html>

OUTPUT

JavaScript Accordion Component Project

JavaScript Accordion Component Project

Also, read:-

Build BMI Calculator in JavaScript

How to make a simple game using HTML

Mortgage Calculator Using JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *