I love JavaScript! However, to create a simple, user-friendly collapsible content section without relying on JavaScript is as follows:
The CSS:
<style>
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: 10px;
width: 300px;
}
summary {
font-weight: bold;
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
</syle>
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapsible Content</title>
</head>
<body>
<details>
<summary>Click to expand</summary>
<p>This is the hidden content that can be expanded and collapsed. You can place any HTML content here, such as text, images, or even other HTML elements.</p>
</details>
</body>
</html>HTML: The <details> element creates a section that the user can expand or collapse. By default, the <details> element displays a block with a clickable triangle to expand/collapse the content. The <summary> element serves as the title for this section.
CSS: The summary::-webkit-details-marker hides the default triangle marker for custom styling, though I use the default marker in this example.