<!DOCTYPE html>
<html>
<head>
<style>
.accordion input {
display: none;
}
.accordion label {
display: block;
padding: 10px;
background: #333;
color: white;
cursor: pointer;
margin-top: 5px;
}
.accordion div {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
background: #f4f4f4;
padding: 0 10px;
}
.accordion input:checked + label + div {
max-height: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div class="accordion">
<input type="checkbox" id="q1">
<label for="q1">What is CSS?</label>
<div>CSS stands for Cascading Style Sheets.</div>
<input type="checkbox" id="q2">
<label for="q2">Why use CSS?</label>
<div>It makes websites look beautiful.</div>
</div>
</body>
</html>
Explanation:
- Uses hidden checkboxes + CSS
:checked. - Expands/collapses without JS.
Leave a Reply