How to Use `<details>` and `<summary>` to Make Collapsible Content in HTML

Have you ever seen a section on a website that expands when clicked and hides when clicked again? That’s called collapsible content, and you can easily make it in HTML using just two simple tags: <details> and <summary>. No JavaScript required!

In this article, we’ll learn how these tags work step by step with clear examples.

🔍 What are `<details>` and `<summary>` in HTML?

HTML5 introduced a set of tags that help make content more interactive without JavaScript. Two of those tags are:

<details> – This tag is used to create a collapsible section.
<summary> – This tag is used to create a heading or title for the collapsible section.

When a user clicks on the <summary>, the content inside <details> expands or collapses.

📦 Basic Syntax

🧠 Step-by-Step Explanation

🔹 Step 1: Use the `<details>` Tag

The <details> tag wraps the entire collapsible section, including the summary (visible part) and the hidden content.

🔹 Step 2: Add a `<summary>` Tag Inside `<details>`

The <summary> tag is what users will see and click on. It's like the "title" of the collapsible box.

🔹 Step 3: Add the Hidden Content Below `<summary>`

Now, add the content you want to hide and show upon clicking.

When you click "Click me", the paragraph will appear or disappear.

✅ Complete Example with Multiple Elements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Collapsible Content Example</title>
</head>
<body>

  <h2>Frequently Asked Questions</h2>

  <details>
    <summary>What is HTML?</summary>
    <p>HTML stands for HyperText Markup Language. It is the standard language for creating web pages.</p>
  </details>

  <details>
    <summary>What is a collapsible section?</summary>
    <p>A collapsible section is a content box that expands or collapses when the user interacts with it.</p>
  </details>

  <details open>
    <summary>What does "open" do?</summary>
    <p>The <code>open</code> attribute makes the details element expanded by default.</p>
  </details>

</body>
</html>

🧩 Extra: Add Some Styling with CSS (Optional)

You can make collapsible sections more attractive with CSS.

<style>
  details {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

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

  p {
    margin: 10px 0 0;
  }
</style>

💡 Benefits of Using `<details>` and `<summary>`

✅ No JavaScript needed
✅ Great for FAQs, instructions, menus
✅ Built-in accessibility
✅ Lightweight and fast to implement

🧪 Browser Compatibility

The <details> and <summary> tags are supported by all modern browsers like:

Chrome
Firefox
Edge
Safari
Opera

However, they may not work well in very old browsers (like Internet Explorer). For such cases, fallback text or a JavaScript polyfill can help.

📌 Real-World Use Cases

Here are some places you can use collapsible sections:

FAQ sections
Product specifications
User manuals or guides
Collapsible menus
Hiding advanced options in forms

🧾 Conclusion

Using <details> and <summary> in HTML is a simple yet powerful way to create collapsible content. It's clean, requires no JavaScript, and improves user experience by allowing people to expand only what they need.

How to Create Collapsible Content in HTML Using <details> and <summary>

Follow us on

How to Use `<details>` and `<summary>` to Make Collapsible Content in HTML

🔍 What are `<details>` and `<summary>` in HTML?

📦 Basic Syntax

🧠 Step-by-Step Explanation

🔹 Step 1: Use the `<details>` Tag

🔹 Step 2: Add a `<summary>` Tag Inside `<details>`

🔹 Step 3: Add the Hidden Content Below `<summary>`

✅ Complete Example with Multiple Elements

🧩 Extra: Add Some Styling with CSS (Optional)

💡 Benefits of Using `<details>` and `<summary>`

🧪 Browser Compatibility

📌 Real-World Use Cases

🧾 Conclusion

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us

How to Create Collapsible Content in HTML Using <details> and <summary>

Follow us on

How to Use <details> and <summary> to Make Collapsible Content in HTML

🔍 What are <details> and <summary> in HTML?

📦 Basic Syntax

🧠 Step-by-Step Explanation

🔹 Step 1: Use the <details> Tag

🔹 Step 2: Add a <summary> Tag Inside <details>

🔹 Step 3: Add the Hidden Content Below <summary>

✅ Complete Example with Multiple Elements

🧩 Extra: Add Some Styling with CSS (Optional)

💡 Benefits of Using <details> and <summary>

🧪 Browser Compatibility

📌 Real-World Use Cases

🧾 Conclusion

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us

How to Use `<details>` and `<summary>` to Make Collapsible Content in HTML

🔍 What are `<details>` and `<summary>` in HTML?

🔹 Step 1: Use the `<details>` Tag

🔹 Step 2: Add a `<summary>` Tag Inside `<details>`

🔹 Step 3: Add the Hidden Content Below `<summary>`

💡 Benefits of Using `<details>` and `<summary>`