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

Barbara Streisand
Release: 2024-11-01 00:49:02
Original
877 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template