HTML-Only Accordions and Tabs with `<details>` and `<summary>`

TL;DR HTML's <details> and <summary> elements can revolutionize interactive content creation, enabling developers to build accordions and tabs without JavaScript. Introduced in HTML5, these elements provide a native way to create collapsible content with a summary or title. By leveraging these underutilized elements, developers can create accessible and lightweight content that works natively in modern browsers.

Unlocking HTML's Hidden Gems: Accordions and Tabs with <details> and <summary>

As full-stack developers, we often find ourselves caught up in the whirlwind of JavaScript frameworks and libraries that promise to simplify our lives. However, in the process, we might overlook some of the most powerful tools hidden within plain old HTML. Today, we're going to explore two underutilized elements that can revolutionize the way we create interactive content: <details> and <summary>. Get ready to unlock a world of possibilities for building accordions and tabs without writing a single line of JavaScript.

What are <details> and <summary>?

Introduced in HTML5, the <details> element represents a widget from which the user can obtain additional information or controls on demand. This element is often used to create accordions, where users can expand or collapse content as needed.

The <summary> element, on the other hand, provides a summary or title for the details that follow. When a user clicks on the summary, the corresponding details are revealed.

Basic Syntax

To get started with creating HTML-only accordions and tabs using <details> and <summary>, you'll need to use the following basic syntax:

<details>
  <summary>Summary or Title</summary>
  <!-- Additional content or controls go here -->
</details>

Here, the <summary> element serves as a toggle for the details that follow. By default, the details are collapsed, and only the summary is visible.

Creating Accordions

One of the most common use cases for <details> and <summary> is creating accordions. Imagine you're building a frequently asked questions (FAQ) page, where users can expand or collapse individual questions to reveal their answers.

<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language, which is used to create web pages.</p>
</details>

<details>
  <summary>What is CSS?</summary>
  <p>CSS stands for Cascading Style Sheets, which is used to control the layout and visual styling of web pages.</p>
</details>

<details>
  <summary>What is JavaScript?</summary>
  <p>JavaScript is a high-level programming language that's commonly used for client-side scripting on the web.</p>
</details>

In this example, each accordion item uses a <details> element with a corresponding <summary> that serves as a toggle. When a user clicks on a summary, the associated details are revealed.

Creating Tabs

Another creative way to use <details> and <summary> is by creating tabs. By using multiple <details> elements with unique summaries, you can create a tabbed interface without writing any JavaScript.

<details>
  <summary>Tab 1</summary>
  <!-- Content for Tab 1 goes here -->
</details>

<details>
  <summary>Tab 2</summary>
  <!-- Content for Tab 2 goes here -->
</details>

<details>
  <summary>Tab 3</summary>
  <!-- Content for Tab 3 goes here -->
</details>

To make the tabs work, you can add some basic CSS to target the open state of each <details> element.

details > summary {
  list-style: none;
}

details[open] > summary {
  background-color: #ccc;
}

Benefits and Limitations

Using <details> and <summary> for accordions and tabs offers several benefits:

• Native support: These elements are part of the HTML specification, which means they work natively in modern browsers without requiring additional libraries or frameworks.
• Accessibility: The <details> element is designed to provide a clear summary of its contents, making it an excellent choice for accessibility-focused development.
• Lightweight: By leveraging native HTML elements, you can create interactive content without adding unnecessary JavaScript overhead.

However, there are some limitations to consider:

• Limited customization: While you can style the <details> and <summary> elements using CSS, their functionality is limited compared to more robust accordion or tab libraries.
• Browser support: Although these elements work in modern browsers, older versions might not support them. Be sure to test your implementation across different browser versions.

Conclusion

In this article, we've explored the basics of HTML-only accordions and tabs using <details> and <summary>. By embracing these underutilized elements, you can create interactive content that's both accessible and lightweight. While there are limitations to consider, the benefits of native support, accessibility, and reduced JavaScript overhead make these elements an excellent choice for modern web development.

So next time you're building a project, take a step back and ask yourself: "Can I achieve this with plain old HTML?" You might be surprised at what you can accomplish without relying on complex libraries or frameworks.