Creating an Accordion with HTML and CSS

An accordion is a popular UI component used to display a list of items, where each item can be expanded or collapsed to show or hide additional content. It’s a great way to save space on a web page while still providing a large amount of information. In this blog post, we’ll explore how to create an accordion using only HTML and CSS. By the end, you’ll have a solid understanding of the fundamental concepts, usage methods, common practices, and best practices for building your own accordions.

Table of Contents

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts

HTML Structure

The basic HTML structure for an accordion consists of a container element, usually a <div>, and a series of sections. Each section has a header (e.g., a <button> or <h2>) that the user can click on, and a content area (e.g., a <div>) that will show or hide when the header is clicked.

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">Section 1</button>
    <div class="accordion-content">
      <p>This is the content for section 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header">Section 2</button>
    <div class="accordion-content">
      <p>This is the content for section 2.</p>
    </div>
  </div>
</div>

CSS Styling

To make the accordion functional, we’ll use CSS to hide and show the content based on the state of the header. We can use the :checked pseudo - class in combination with the input element or the :active or :focus pseudo - classes on the button. Here’s a simple example using the :checked pseudo - class with a hidden checkbox:

<div class="accordion">
  <input type="checkbox" id="accordion-1">
  <label for="accordion-1" class="accordion-header">Section 1</label>
  <div class="accordion-content">
    <p>This is the content for section 1.</p>
  </div>
</div>

.accordion-content {
  display: none;
}

input[type="checkbox"]:checked ~ .accordion-content {
  display: block;
}

Usage Methods

Single - Item Accordion

If you want only one item to be expanded at a time, you can use JavaScript to manage the state. However, with pure HTML and CSS, we can use radio buttons instead of checkboxes. Radio buttons ensure that only one option can be selected at a time.

<div class="accordion">
  <input type="radio" id="accordion-1" name="accordion-group">
  <label for="accordion-1" class="accordion-header">Section 1</label>
  <div class="accordion-content">
    <p>This is the content for section 1.</p>
  </div>
  <input type="radio" id="accordion-2" name="accordion-group">
  <label for="accordion-2" class="accordion-header">Section 2</label>
  <div class="accordion-content">
    <p>This is the content for section 2.</p>
  </div>
</div>

.accordion-content {
  display: none;
}

input[type="radio"]:checked ~ .accordion-content {
  display: block;
}

Multiple - Item Accordion

If you want multiple items to be expandable simultaneously, use checkboxes as shown in the previous example. Each checkbox can be toggled independently.

Common Practices

Adding Transitions

To make the expansion and collapse of the accordion look smooth, we can add CSS transitions. For example, we can add a transition to the max-height property instead of display because display doesn’t support transitions.

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

input[type="checkbox"]:checked ~ .accordion-content {
  max-height: 500px; /* Adjust this value based on your content */
}

Styling the Headers

To make the accordion more user - friendly, we can style the headers. For example, we can change the background color when the header is active.

.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
}

.accordion-header:hover {
  background-color: #ddd;
}

input[type="checkbox"]:checked + .accordion-header {
  background-color: #ccc;
}

Best Practices

Accessibility

  • Use Semantic HTML: Use appropriate HTML elements like <button> or <input> for the accordion headers. This helps screen readers understand the functionality.
  • Keyboard Navigation: Ensure that the accordion can be navigated and activated using the keyboard. Buttons and inputs are natively keyboard - accessible.
  • ARIA Attributes: Add ARIA (Accessible Rich Internet Applications) attributes to the accordion elements. For example, aria - expanded can be used to indicate whether the content is expanded or collapsed.

Responsive Design

  • Fluid Layout: Make sure the accordion layout adjusts well to different screen sizes. Use relative units like percentages or em for sizing.
  • Media Queries: If necessary, use media queries to change the accordion’s appearance on smaller screens. For example, you might want to reduce the padding or font size.

Conclusion

Creating an accordion with HTML and CSS is a great way to add interactive elements to your web pages without relying on JavaScript. By understanding the fundamental concepts, usage methods, common practices, and best practices, you can build functional and accessible accordions. Remember to focus on accessibility and responsive design to ensure a great user experience across all devices.

References