How to Create Multiple Collapsible Divs in Pure CSS Without Extensive Code?

Pure CSS Collapsible Divs: Minimizing Code for Multiple Elements

Question:

In pure CSS, how can you create multiple collapsible div elements without writing extensive code for each element?

Context:

The provided code uses the :target pseudoclass to collapse and expand a single div. However, the need to create numerous similar div elements requires a large amount of CSS.

Solution:

An alternative approach is to utilize the

and HTML tags, which are specifically designed for this functionality.

Details:

• : Contains the text that appears before expanding the details.
• : Encloses the detailed content that is initially hidden.

By nesting these tags, you can easily create expandable sections without any CSS:

<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 varies. Webkit (e.g., Safari, Chrome) offers the best results. In other browsers, the details may always be shown.

Fallback:

If

and tags are not supported, consider using the hide/show method with extensive CSS selectors.

The above is the detailed content of How to Create Multiple Collapsible Divs in Pure CSS Without Extensive Code?. For more information, please follow other related articles on the PHP Chinese website!