Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

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 User 694 20 Jul 2021

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

html javascripthtmlcss-css3
Updated 28 Nov 2023
Anonymous User
Anonymous User

Software Developer Trainee

I am a content writter !

Message

1 Answers

Aryan Kumar
Aryan Kumar 28 Nov 2023
Report Abuse

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.

advertising