Accordion with the help of an HTML, CSS and JavaScript

Question

Aryan Kumar · Answer

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:
andlt;!DOCTYPE html>
andlt;html lang="en">
andlt;head>
  andlt;meta charset="UTF-8">
  andlt;meta name="viewport" content="width=device-width, initial-scale=1.0">
  andlt;title>Accordion Exampleandlt;/title>
  andlt;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;
    }
  andlt;/style>
andlt;/head>
andlt;body>
  andlt;div class="accordion">
    andlt;div class="accordion-item">
      andlt;div class="accordion-header" onclick="toggleAccordion(this)">Section 1andlt;/div>
      andlt;div class="accordion-content">
        andlt;p>Content for section 1.andlt;/p>
      andlt;/div>
    andlt;/div>
    andlt;div class="accordion-item">
      andlt;div class="accordion-header" onclick="toggleAccordion(this)">Section 2andlt;/div>
      andlt;div class="accordion-content">
        andlt;p>Content for section 2.andlt;/p>
      andlt;/div>
    andlt;/div>
    andlt;!-- Add more sections as needed -->
  andlt;/div>
  andlt;script>
    function toggleAccordion(header) {
      var content = header.nextElementSibling;
      content.style.display = content.style.display === "block" ? "none" : "block";
    }
  andlt;/script>
andlt;/body>
andlt;/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.

forum

Accordion with the help of an HTML, CSS and JavaScript

Anonymous User

Can you answer this question?

1 Answers

Liked By