Modern Minimalist Collapse - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern Minimalist Collapse</title> <style> body { font-family: 'Arial', sans-serif; background-color: #fff; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; height: 100vh; } .minimalist-collapse-container { width: 100%; max-width: 600px; margin: 0 auto; } .minimalist-collapse-header { background-color: #ffffff; color: #000; padding: 15px 20px; cursor: pointer; border: 1px solid #000; transition: background-color 0.3s ease, color 0.3s ease; } .minimalist-collapse-header:hover { background-color: #000; color: #fff; } .minimalist-collapse-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; background-color: #f9f9f9; padding: 0 20px; } .minimalist-collapse-content p { padding: 20px 0; margin: 0; color: #333; } .minimalist-collapse-content.show { max-height: 500px; } </style> </head> <body> <div class="minimalist-collapse-container"> <div class="minimalist-collapse-header" onclick="toggleMinimalistCollapse(this)"> Click to Expand </div> <div class="minimalist-collapse-content"> <p>This minimalist collapse component focuses on simplicity and functionality. Perfect for a clean, modern design.</p> </div> </div> <script> function toggleMinimalistCollapse(element) { const header = element; const content = header.nextElementSibling; content.classList.toggle('show'); } </script> </body> </html>