In this lesson, you'll learn how to create sections that users can expand or collapse. This feature is very helpful when you want to hide extra information until it is needed, keeping your page clean and organized.

What Are <details> and <summary>?

• <details> Element: This tag creates a block that users can open or close. It is used to enclose content that can be hidden or shown.
• <summary> Element: This tag defines a visible caption for the <details> block. When users click on the caption, the block expands or collapses.

Basic Syntax

<details>
  <summary>Clickable Caption</summary>
  Hidden content goes here.
</details>

• The <summary> tag is placed at the top of the <details> tag.
• When the user clicks the summary, the hidden content will appear or disappear.

Example 1: Simple Collapsible Section

Below is a basic example that shows a simple collapsible section. The hidden content is only displayed when the user clicks the "More Info" caption.

Explanation:

• The <summary> tag shows "More Info" as the clickable caption.
• When clicked, the paragraphs within <details> are shown.
• This keeps the page tidy by hiding extra details until needed.

Example 2: FAQ Section

Here is another example that uses <details> and <summary> to build a basic FAQ (Frequently Asked Questions) section.

Explanation:

• Three separate <details> sections are used, each with its own <summary>.
• This allows users to click on a question to see the answer.
• The FAQ section is interactive and easy to use.

Using <details> and <summary> helps make your pages cleaner and more user-friendly by hiding extra information until it is needed. This is a handy tool when you want to organize content without overwhelming the reader.