How to Create a Collapsible Div with Pure CSS using and ?

Pure CSS Collapsible Div Solution

In this query, a user seeks guidance on creating a pure CSS collapsible div, similar to the example in the provided jsfiddle. However, they aim to minimize CSS code and avoid writing numerous selectors for multiple question-answer pairs.

Unlike the original approach based on the :target pseudoclass, this query introduces the

and

HTML tags. These tags are designed exclusively for creating collapsible content.

Using

and

• : Defines the summary text that is initially visible before expanding the div.
• : Encloses the collapsible content that is hidden until the summary is clicked.

Example:

<code class="html"><details>
  <summary>This is what you want to show before expanding</summary>
  <p>This is where you put the details that are shown once expanded</p>
</details></code>

Browser Support

Browser support for the

and

tags is varied. Webkit-based browsers, such as Chrome and Safari, offer optimal support for this functionality. Other browsers may exhibit default behaviors, such as showing all collapsible content.

Fallback Method

For browsers that do not fully support the

and

tags, a fallback method using CSS can be considered. This involves using the combination of the :target pseudoclass and the display property to toggle the visibility of the collapsible content.

The above is the detailed content of How to Create a Collapsible Div with Pure CSS using and ?. For more information, please follow other related articles on the PHP Chinese website!