Here’s a full solution for Using the <details> and <summary> Tags for Expandable Content
Step 1: HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using the <details> and <summary> Tags for Expandable Content</title>
<meta name="description" content="Learn how to use the HTML5 <details> and <summary> tags to create expandable content sections. Includes example code and explanation.">
<meta name="keywords" content="HTML5 details tag, summary tag, expandable content, collapsible section, HTML toggle content">
</head>
<body>
<h2>FAQ Section</h2>
<details>
<summary>What is the <details> tag?</summary>
<p>The `<details>` tag is used to create an expandable/collapsible section in HTML. When clicked, it reveals additional content.</p>
</details>
<details>
<summary>How does the <summary> tag work?</summary>
<p>The `<summary>` tag defines the visible heading for the `<details>` element. Clicking on it toggles the visibility of the content.</p>
</details>
<details>
<summary>Can I style the <details> and <summary> elements?</summary>
<p>Yes! You can use CSS to change the appearance, background color, font size, and more.</p>
</details>
</body>
</html>
Step 2: CSS Code
body {
font-family: Arial, sans-serif;
margin: 50px;
background-color: #f8f9fa;
}
details {
background: #fff;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
cursor: pointer;
}
summary {
font-weight: bold;
font-size: 1.1em;
outline: none;
}
details[open] {
background: #e9ecef;
}
Â
