Building a Native Accordion with `<details>` and `<summary>` (No JS!)

TL;DR Build a native accordion with HTML tags <details> and <summary>, eliminating the need for JavaScript. This technique creates collapsible sections of content, providing users easy access without overwhelming them with too much information at once.

Building a Native Accordion with <details> and <summary> (No JS!)

As full-stack developers, we're no strangers to building complex interfaces that require JavaScript for dynamic interactions. However, sometimes the simplest solutions can be found in plain old HTML. In this article, we'll explore how to build a native accordion component using only HTML tags <details> and <summary>, eliminating the need for any JavaScript.

The Basics: What are <details> and <summary>?

The <details> element is a semantic HTML tag that allows us to create a collapsible section of content. When paired with its companion, the <summary> element, we can provide a summary or title for the collapsed content. The <summary> element serves as the toggle button for expanding or collapsing the details.

Basic Syntax

Here's a basic example of how to use these elements together:

<details>
  <summary>Click me!</summary>
  <p>This is some hidden content that can be toggled on and off.</p>
</details>

In this example, "Click me!" is the title or summary of the content, and when clicked, it expands to reveal the paragraph below.

Creating an Accordion Component

Now that we've covered the basics, let's create a simple accordion component using multiple <details> elements:

<details>
  <summary>Section 1</summary>
  <p>This is some content for section 1.</p>
</details>

<details>
  <summary>Section 2</summary>
  <p>This is some more content for section 2.</p>
</details>

<details>
  <summary>Section 3</summary>
  <p>This is even more content for section 3.</p>
</details>

This code creates three collapsible sections, each with its own summary and content. By default, all sections are collapsed, and the user can click on any summary to expand or collapse its corresponding details.

Styling the Accordion (Optional)

While not required for functionality, adding some basic CSS can enhance the visual appeal of our accordion component:

details {
  margin-bottom: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

details[open] summary {
  font-weight: normal;
}

In this example, we add a bottom margin to each <details> element for better spacing and make the cursor more intuitive by changing it to a pointing hand when hovering over the <summary>. We also adjust the font weight of the summary text based on whether its details are expanded or collapsed.

Conclusion

Building an accordion component with native HTML tags is a simple yet powerful technique that eliminates the need for JavaScript. By leveraging the <details> and <summary> elements, we can create intuitive interfaces that provide users with easy access to content without overwhelming them with too much information at once. Whether you're building a complex web application or just want to add some flair to your blog posts, this technique is definitely worth keeping in your toolkit.

In conclusion, by understanding the fundamentals of HTML and its capabilities, we can create more efficient, accessible, and engaging interfaces for our users. The next time you need an accordion component, consider using these native HTML elements – your users (and your codebase) will thank you!