Can Collapsible Content Be Created in HTML and CSS Without jQuery?

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

Utilizing Custom CSS Styling

For more granular control over the appearance and behavior of collapsible content, custom CSS can be implemented.

details {
  border: 1px solid black;
  padding: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

details[open] summary {
  color: green;
}

details[open] p {
  display: block;
}

In this example, the borders and padding of collapsible sections are defined, while the cursor changes to a pointer when hovering over the summary. The open attribute is used to change the color of summary and show/hide the content.

Additional Examples

The following examples showcase alternative approaches:

• Using Radio Buttons: Creating a separate radio button for each collapsible section allows for a more "traditional" collapse and expand behavior.
• Custom JavaScript without jQuery: Employing inline JavaScript functions to toggle the visibility of collapsible sections eliminates the need for jQuery, but still adds external scripting.
• Using Vue.js: Leveraging a lightweight JavaScript framework like Vue.js provides a structured approach to manage state and reactivity, making it suitable for more complex collapsible content.
• CSS Awnings with Fluid Typography: This technique uses pure CSS with fluid typography to simulate the collapsing and expanding effect with awnings that can be customized to fit different screen sizes.

The above is the detailed content of Can Collapsible Content Be Created in HTML and CSS Without jQuery?. For more information, please follow other related articles on the PHP Chinese website!