Learn how to create collapsible and expandable sections on your web page using HTML <details> and <summary> tags. Step-by-step tutorial with clear examples.

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!

🔥 Read with Full Features on Our Website

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

Google Advertisement

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
Google Advertisement

✅ 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
Google Advertisement

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>

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

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize

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

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

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize

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>`