Input
Output
<!DOCTYPE html> <html> <head> <style> .accordion input { display: none; } .accordion label { display: block; background-color: #eee; padding: 10px; cursor: pointer; } .accordion-content { max-height: 0; overflow: hidden; background-color: #f9f9f9; transition: max-height 0.3s ease; padding: 0 10px; } input:checked + label + .accordion-content { max-height: 100px; padding: 10px; } </style> </head> <body> <div class="accordion"> <input type="checkbox" id="section1"> <label for="section1">Section 1</label> <div class="accordion-content"> <p>This is section 1 content.</p> </div> </div> </body> </html>