Glassmorphism Accordion - VexaX
Run Code
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>Glassmorphism Accordion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)); display: flex; justify-content: center; align-items: center; height: 100vh; } .accordion { width: 80%; max-width: 600px; } .accordion-item { background: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin-bottom: 10px; overflow: hidden; transition: all 0.3s ease; } .accordion-header { background: linear-gradient(135deg, #6e8efb, #a777e3); color: white; cursor: pointer; padding: 15px; font-size: 1.2rem; display: flex; justify-content: space-between; align-items: center; border: none; outline: none; transition: background 0.3s ease; } .accordion-header:hover { background: linear-gradient(135deg, #a777e3, #6e8efb); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 15px; background: rgba(255, 255, 255, 0.2); } .accordion-content p { margin: 10px 0; color: #fff; } .accordion-content.open { max-height: 500px; /* adjust according to content */ padding: 15px; } .accordion-icon { font-size: 1.5rem; transition: transform 0.3s ease; } .accordion-icon.rotate { transform: rotate(180deg); } </style> </head> <body> <div class="accordion"> <div class="accordion-item"> <button class="accordion-header"> Section 1 <i class="fas fa-chevron-down accordion-icon"></i> </button> <div class="accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="accordion-item"> <button class="accordion-header"> Section 2 <i class="fas fa-chevron-down accordion-icon"></i> </button> <div class="accordion-content"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p> </div> </div> <div class="accordion-item"> <button class="accordion-header"> Section 3 <i class="fas fa-chevron-down accordion-icon"></i> </button> <div class="accordion-content"> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis.</p> </div> </div> </div> <script> document.querySelectorAll('.accordion-header').forEach(header => { header.addEventListener('click', () => { const content = header.nextElementSibling; const icon = header.querySelector('.accordion-icon'); if (content.classList.contains('open')) { content.classList.remove('open'); icon.classList.remove('rotate'); } else { document.querySelectorAll('.accordion-content').forEach(c => { c.classList.remove('open'); }); document.querySelectorAll('.accordion-icon').forEach(i => { i.classList.remove('rotate'); }); content.classList.add('open'); icon.classList.add('rotate'); } }); }); </script> </body> </html>