top of page

Just Jolly Functions

Functions: Creating an Accordion with HTML, CSS, and JavaScript

An accordion is a UI (user interface) component used to display content in a collapsible and expandable manner. It allows users to toggle between sections of content, revealing or hiding them as needed. This feature is commonly used when you have limited space or need to present a large amount of information in a compact form.



Combined 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>
    /* Basic styling */
    body {
      font-family: Arial, sans-serif;
    }

    .accordion-container {
      width: 300px;
      margin: 50px auto;
    }

    .accordion {
      background-color: #f1f1f1;
      color: #444;
      padding: 10px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .accordion:hover {
      background-color: #ccc;
    }

    .panel {
      padding: 0 18px;
      display: none;
      background-color: #f9f9f9;
      border-left: 2px solid #ccc;
    }

    .panel p {
      margin: 10px 0;
    }
  </style>
</head>
<body>

  <div class="accordion-container">
    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>Content for Section 1.</p>
    </div>

    <button class="accordion">Section 2</button>
    <div class="panel">
      <p>Content for Section 2.</p>
    </div>

    <button class="accordion">Section 3</button>
    <div class="panel">
      <p>Content for Section 3.</p>
    </div>
  </div>

  <script>
    // Get all accordion buttons
    var accordions = document.getElementsByClassName("accordion");

    // Loop through each accordion button
    for (var i = 0; i < accordions.length; i++) {
      accordions[i].addEventListener("click", function () {
        // Toggle the "active" class to change the button style
        this.classList.toggle("active");

        // Get the panel that corresponds to the clicked accordion button
        var panel = this.nextElementSibling;

        // Toggle the panel display between none and block
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
  </script>

</body>
</html>

How it works:

  • HTML: Contains the structure for the accordion. Each section is a button (.accordion) followed by a hidden div (.panel) that contains the content for that section.

  • CSS: Handles the styling of the accordion, including button hover effects and the hidden content panel.

  • JavaScript: Adds functionality for toggling the content visibility when an accordion section is clicked.


Customizations:

  1. Accordion Transition Animation:

    • You can add smooth transition effects to the panel opening and closing.

  2. Change Accordion Button Style:

    • Customize the button appearance, add icons, or change the hover effect.

  3. Allow Only One Panel Open at a Time:

    • You can modify the JavaScript so that when a new section is opened, the others close automatically.

  4. Change Background Colors:

    • Modify the background colors for the accordion and panel to create a different theme.

  5. Change Panel Height Dynamically:

    • Instead of toggling the display property, you can animate the height of the panel to create a smoother effect.


Customization 1: Add Smooth Transitions for Opening/Closing Panels


CSS:

/* Add transition for smooth animation */
.panel {
  padding: 0 18px;
  display: none;
  background-color: #f9f9f9;
  border-left: 2px solid #ccc;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

.panel.open {
  display: block;
  height: auto; /* This makes the content appear smoothly */
}

JavaScript: Modify the JavaScript to use the open class instead of directly toggling display:

// Get all accordion buttons
var accordions = document.getElementsByClassName("accordion");

// Loop through each accordion button
for (var i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener("click", function () {
    // Toggle the "active" class to change the button style
    this.classList.toggle("active");

    // Get the panel that corresponds to the clicked accordion button
    var panel = this.nextElementSibling;

    // Toggle the panel open/close
    if (panel.classList.contains("open")) {
      panel.classList.remove("open");
    } else {
      panel.classList.add("open");
    }
  });
}

Customization 2: Change Accordion Button Style

You can update the button appearance and add a visual indicator (like a plus or minus sign) to show if the section is open or closed.


CSS:

.accordion {
  background-color: #007BFF;
  color: #fff;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.accordion:hover {
  background-color: #0056b3;
}

.accordion:after {
  content: '+';
  font-size: 18px;
  float: right;
  transition: transform 0.3s ease;
}

.accordion.active:after {
  content: '-';
  transform: rotate(180deg);
}

Customization 3: Allow Only One Panel Open at a Time

This change will ensure that when you open one panel, the others close.


JavaScript:

// Get all accordion buttons
var accordions = document.getElementsByClassName("accordion");

// Loop through each accordion button
for (var i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener("click", function () {
    // Close all other panels
    for (var j = 0; j < accordions.length; j++) {
      if (accordions[j] !== this) {
        accordions[j].nextElementSibling.classList.remove("open");
        accordions[j].classList.remove("active");
      }
    }

    // Toggle the "active" class to change the button style
    this.classList.toggle("active");

    // Get the panel that corresponds to the clicked accordion button
    var panel = this.nextElementSibling;

    // Toggle the panel open/close
    if (panel.classList.contains("open")) {
      panel.classList.remove("open");
    } else {
      panel.classList.add("open");
    }
  });
}

Customization 4: Change Background Colors

You can modify the background colors for the buttons and the panels to suit your theme.


CSS:

/* Change button background color */
.accordion {
  background-color: #4CAF50;  /* Green */
  color: white;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  cursor: pointer;
}

.accordion:hover {
  background-color: #45a049;
}

/* Change panel background color */
.panel {
  background-color: #f1f1f1;  /* Light gray */
}

/* For active state, change button background */
.accordion.active {
  background-color: #45a049;
}

/* Add animation when opening the panel */
.panel {
  transition: max-height 0.3s ease;
  max-height: 0;
  overflow: hidden;
}

.panel.open {
  max-height: 200px;  /* Adjust based on your content height */
}

Customization 5: Change Panel Height Dynamically (with Max-Height)

For a smoother transition, you can animate the panel's height instead of using display: none and display: block.

CSS:

/* Set max-height for smooth transition */
.panel {
  background-color: #f9f9f9;
  border-left: 2px solid #ccc;
  padding: 0 18px;
  max-height: 0;  /* Initial collapsed height */
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.panel.open {
  max-height: 200px;  /* Adjust based on the content size */
}

JavaScript: The JavaScript for this customization remains the same, as it only toggles the open class.


Final Code with All Customizations Combined:

<!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>
    /* Basic styling */
    body {
      font-family: Arial, sans-serif;
    }

    .accordion-container {
      width: 300px;
      margin: 50px auto;
    }

    .accordion {
      background-color: #4CAF50;  /* Green */
      color: white;
      padding: 12px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .accordion:hover {
      background-color: #45a049;
    }

    .accordion:after {
      content: '+';
      font-size: 18px;
      float: right;
      transition: transform 0.3s ease;
    }

    .accordion.active:after {
      content: '-';
      transform: rotate(180deg);
    }

    /* Panel Styles */
    .panel {
      background-color: #f1f1f1;  /* Light gray */
      border-left: 2px solid #ccc;
      padding: 0 18px;
      max-height: 0;  /* Initial collapsed height */
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }

    .panel.open {
      max-height: 200px;  /* Adjust based on content size */
    }
  </style>
</head>
<body>

  <div class="accordion-container">
    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>Content for Section 1.</p>
    </div>

    <button class="accordion">Section 2</button>
    <div class="panel">
      <p>Content for Section 2.</p>
    </div>

    <button class="accordion">Section 3</button>
    <div class="panel">
      <p>Content for Section 3.</p>
    </div>
  </div>

  <script>
    // Get all accordion buttons
    var accordions = document.getElementsByClassName("accordion");

    // Loop through each accordion button
    for (var i = 0; i < accordions.length; i++) {
      accordions[i].addEventListener("click", function () {
        // Close all other panels
        for (var j = 0; j < accordions.length; j++) {
          if (accordions[j] !== this) {
            accordions[j].nextElementSibling.classList.remove("open");
            accordions[j].classList.remove("active");
          }
        }

        // Toggle the "active" class to change the button style
        this.classList.toggle("active");

        // Get the panel that corresponds to the clicked accordion button
        var panel = this.nextElementSibling;

        // Toggle the panel open/close
        if (panel.classList.contains("open")) {
          panel.classList.remove("open");
        } else {
          panel.classList.add("open");
        }
      });
    }
  </script>

</body>
</html>

Customizations in this code:

  • Smooth transitions for panel height.

  • Accordion button changes with hover effects and an icon that switches between a plus and minus sign.

  • Only one panel open at a time.

  • Dynamic panel height with animation.


This should give you a much more visually appealing and user-friendly accordion component.

bottom of page