How I make an accordion without javascript

You should know that an Accordion is a UI element used to show a list of items concisely. This component consists of several widgets that can be expanded or collapsed. It’s a handy kind of component to display hidden content, usually when a title is clicked. You’ll often find this component on Frequently Asked Questions (FAQ) pages in apps and websites.

In this tutorial, I’m gonna share how I make an accordion without JavaScript. Why do I mention JavaScript? Because developers usually create accordions with some logic, like showing and hiding in each section. For now, I’ll show you how to make a simple accordion using the <details> and <summary> elements in HTML.

You just need to understand how to use those two tags first, if you don’t get it, I’ll explain it below:

The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an open state. A summary or label must be provided using the <summary> element.

A disclosure widget is typically presented onscreen using a small triangle that rotates (or twists) to indicate open/closed state, with a label next to the triangle. The contents of the <summary> element are used as the label for the disclosure widget. The contents of the <details> provide the accessible description for the <summary>.

• <details> element is used to create interactive widgets that can be opened and closed.
• <summary> element defines a summary or title for the <details> element.

Alright, without needing to explain much, I’ll share the steps to create an accordion using HTML:

• Use the <details> element to wrap each part of the accordion.
• Use the <summary> element to define the title of each section.
• Add detailed content within the <details> element.

<details>
  <summary>Summary 1</summary>
  <p>This is the detailed content for section 1.</p>
</details>

<details>
  <summary>Summary 2</summary>
  <p>This is the detailed content for section 2.</p>
</details>

<details>
  <summary>Summary 3</summary>
  <p>This is the detailed content for section 3.</p>
</details>

The explanation of the code above:

• When a user clicks the <summary> element, the content inside the <details> element will be shown or hidden.
• You can add CSS styles to make the accordion look nice.

The <details> and <summary> elements are a simple way to make an accordion without JavaScript. Even though they have some limitations, this method works great for simple use cases where you don’t need advanced functionality.