To achieve the collapsing interaction effect of web page content, you can use the HTML <details> and <summary> tags. The specific methods are as follows: 1. Use <details> to wrap the content that needs to be hidden; 2. Add <summary> as a trigger button in <details>; 3. Place the detailed content after <summary> and support any HTML elements; 4. You can customize the style through CSS, such as modifying arrow icons, background color, fonts, etc., but pay attention to clearing the default style and compatibility issues; 5. Make sure <summary> is a direct child element of <details> and cannot be nested; 6. Mainstream browsers have already supported it, but JavaScript alternatives may be required in old devices or IE.

If you have seen content areas on a web page that can be expanded or closed, such as FAQ sections, folded menus, or hidden technical details, it is likely that <details></details> and <summary></summary> elements of HTML are used. These two tags work together to easily enable interactive content folding without JavaScript.

What are <details></details> and <summary></summary> ?

<details></details> is a container used to wrap "extra information". By default, this information is hidden and will only be displayed when the user actively expands it.
<summary></summary> is a tag written inside <details></details> to define the title or button text when expanded/collapsed.

For example:

 <details>
  <summary>Click to view detailed instructions</summary>
  <p>Here are the details you want to hide. </p>
</details>

The above code will display a clickable "Click to view detailed instructions" on the page, and a paragraph of text will be expanded after clicking.

How do I create a collapsible area with them?

To create a basic collapsed area, just put the content you want to hide into the <details> tag and add a <summary> to it as a trigger button.

The basic structure is as follows:

• Use <details> to wrap the entire foldable area
• Add <summary> as the title inside <details>
• Put the content you need to hide behind <summary> (can be paragraphs, lists, pictures, etc.)

You can add multiple elements according to your needs, for example:

 <details>
  <summary>FAQ1</summary>
  <p>This is the answer to the first question. </p>
  <ul>
    <li>First explanation</li>
    <li>Second point </li>
  </ul>
</details>

This shows a folded block with a list.

Can I customize the style?

sure! Although the browser has added some styles to <details> and <summary> by default, you can use CSS to beautify it like other HTML elements.

Common customizations include:

• Modify the arrow icon (default is a small triangle)
• Set background colors and borders
• Adjust font size and spacing

Note: <summary> will have some built-in styles in the browser by default. You may need to use list-style: none; or appearance: none; to clear the default style before customizing it.

A small trick is that you can modify the default arrow symbol through pseudo-element ::marker :

 summary::marker {
  color: red;
}

However, the compatibility of this attribute is still being gradually improved, and other ways to replace the icons may need to be considered in actual projects.

Things to note

• <summary></summary> must be a direct child of <details></details> , otherwise it will not work properly.
• Nested usage is not supported, which means that you cannot put a complete <details></details> structure in a <details></details> .
• In terms of browser compatibility, modern mainstream browsers support it, but it may not be used on some older devices or IE, and requires downgrade processing or fallback to the JS scheme.

Basically that's it. Use <details></details> and <summary></summary> well to make your web page more concise and improve the user's interactive experience.

The above is the detailed content of What is the and element, and how do I use them to create a collapsible section of content?. For more information, please follow other related articles on the PHP Chinese website!