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

Creating Collapsible Content in HTML and CSS Without jQuery

Many designers strive to create collapsible content like that showcased in jQuery Mobile's theme. However, it is worth considering whether using jQuery is necessary for such functionality. This article explores the possibility of achieving this using pure HTML and CSS, providing several examples to demonstrate its feasibility.

Using HTML5's and

Tags

HTML5 introduces the and

tags specifically designed for this purpose. These tags require no additional styling or scripting.

<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!