Creating an Accordion with HTML, CSS, and JavaScript

An accordion is a vertically stacked list of items, each containing a header and the associated content. It allows the user to open and close each item, showing only one item at a time. In this tutorial, we will create an accordion using HTML, CSS, and JavaScript.

HTML

We will start by creating the HTML structure for our accordion. For this, we will use an unordered list with the class “accordion”. Each list item will contain a header and the content. We will also add a button element inside the header for opening and closing the content.

<ul class="accordion">
  <li>
    <div class="accordion-header">
      <h3>Header 1</h3>
      <button>+</button>
    </div>
    <div class="accordion-content">
      <p>Content 1</p>
    </div>
  </li>
  <li>
    <div class="accordion-header">
      <h3>Header 2</h3>
      <button>+</button>
    </div>
    <div class="accordion-content">
      <p>Content 2</p>
    </div>
  </li>
  <!-- Add as many list items as you need -->
</ul>

CSS

Next, we will add some styles to our accordion. We will set the default state of the accordion-content to be hidden. We will also set the styles for the header and the button.

.accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: #eee;
  padding: 1rem;
}

.accordion-header h3 {
  margin: 0;
}

.accordion-header button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: #666;
}

.accordion-content {
  display: none;
  background-color: #ddd;
  padding: 1rem;
}

JavaScript

Finally, we will add the logic to open and close the accordion-content. For this, we will add a click event listener to the accordion-header. When the header is clicked, we will toggle the display of the accordion-content and change the text of the button from “+” to “-”.

const headers = document.querySelectorAll('.accordion-header');

headers.forEach(header => {
  header.addEventListener('click', function() {
    const content = this.nextElementSibling;
    const button = this.querySelector('button');

    content.style.display = content.style.display === 'block' ? 'none' : 'block';
    button.textContent = button.textContent === '+' ? '-' : '+';
  });
});

And that's it! You now have an accordion using HTML, CSS, and JavaScript. You can add as many items as you need, customize the styles to fit your needs, and even make it dynamic by using JavaScript to retrieve data from an API and build the accordion dynamically.

Here's the complete code for reference:

HTML:

<ul class="accordion">
  <li>
    <div class="accordion-header">
      <h3>Header 1</h3>
      <button>+</button>
    </div>
    <div class="accordion-content">
      <p>Content 1</p>
    </div>
  </li>
  <li>
    <div class="accordion-header">
      <h3>Header 2</h3>
      <button>+</button>
    </div>
    <div class="accordion-content">
      <p>Content 2</p>
    </div>
  </li>
  <!-- Add as many list items as you need -->
</ul>

CSS:

.accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: #eee;
  padding: 1rem;
}

.accordion-header h3 {
  margin: 0;
}

.accordion-header button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: #666;
}

.accordion-content {
  display: none;
  background-color: #ddd;
  padding: 1rem;
}

JavaScript:

const headers = document.querySelectorAll('.accordion-header');

headers.forEach(header => {
  header.addEventListener('click', function() {
    const content = this.nextElementSibling;
    const button = this.querySelector('button');

    content.style.display = content.style.display === 'block' ? 'none' : 'block';
    button.textContent = button.textContent === '+' ? '-' : '+';
  });
});

You can now go ahead and play around with the code to see how it works and add any additional features as needed. Good luck!