forum

Home / DeveloperSection / Forums / Accordion with the help of an HTML, CSS and JavaScript

Ask Question

Accordion with the help of an HTML, CSS and JavaScript

Anonymous User38020-Jul-2021

What is an Accordion? How to make an Accordion with the help of an HTML, CSS and JavaScript?

htmljavascript html css-css3 
Updated on 28-Nov-2023
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

28-Nov-2023

An accordion is a UI (User Interface) pattern that allows you to collapse and expand content sections, revealing or hiding additional information. It typically consists of a list of items, and each item can be expanded or collapsed independently of the others.

Here's an example of how to create a simple accordion using HTML, CSS, and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accordion Example</title>
  <style>
    /* Style for the accordion */
    .accordion {
      display: flex;
      flex-direction: column;
    }

    /* Style for accordion items */
    .accordion-item {
      border: 1px solid #ccc;
      margin-bottom: 5px;
    }

    /* Style for accordion headers (titles) */
    .accordion-header {
      background-color: #f1f1f1;
      padding: 10px;
      cursor: pointer;
    }

    /* Style for accordion content (hidden by default) */
    .accordion-content {
      display: none;
      padding: 10px;
    }

    /* Style for active accordion items */
    .active {
      display: block;
    }
  </style>
</head>
<body>

  <div class="accordion">
    <div class="accordion-item">
      <div class="accordion-header" onclick="toggleAccordion(this)">Section 1</div>
      <div class="accordion-content">
        <p>Content for section 1.</p>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-header" onclick="toggleAccordion(this)">Section 2</div>
      <div class="accordion-content">
        <p>Content for section 2.</p>
      </div>
    </div>
    <!-- Add more sections as needed -->
  </div>

  <script>
    function toggleAccordion(header) {
      var content = header.nextElementSibling;
      content.style.display = content.style.display === "block" ? "none" : "block";
    }
  </script>

</body>
</html>

In this example:

  • Each accordion item is structured with a header and content.
  • Clicking on the header triggers the toggleAccordion function, which toggles the display of the associated content.

You can customize the styles, add more sections, and extend the functionality based on your specific requirements. This is a basic example, and more complex accordions can be built using frameworks like Bootstrap or dedicated accordion libraries.

Liked By