Minimalistic Accordion - 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>Minimalistic Accordion</title> <style> body { font-family: 'Arial', sans-serif; background: #ffffff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .accordion { background: #f7f7f7; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; width: 100%; max-width: 600px; } .accordion-item { border-bottom: 1px solid #ddd; } .accordion-item:last-child { border-bottom: none; } .accordion-header { background: #fff; color: #333; cursor: pointer; padding: 20px; font-size: 1.2rem; transition: background 0.3s; display: flex; justify-content: space-between; align-items: center; } .accordion-header:hover { background: #e5e5e5; } .accordion-content { background: #f7f7f7; color: #333; display: none; padding: 20px; animation: fadeIn 0.3s forwards; } .accordion-content p { margin: 0; } .accordion-item.active .accordion-content { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .icon { transition: transform 0.3s; } .accordion-item.active .icon { transform: rotate(90deg); } </style> </head> <body> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header"> <h3>Part 1 <span>🌟</span></h3> <span class="icon">▶</span> </div> <div class="accordion-content"> <p>Minimalistic content for the first part goes here.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>Part 2 <span>💼</span></h3> <span class="icon">▶</span> </div> <div class="accordion-content"> <p>Minimalistic content for the second part goes here.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>Part 3 <span>📄</span></h3> <span class="icon">▶</span> </div> <div class="accordion-content"> <p>Minimalistic content for the third part goes here.</p> </div> </div> </div> <script> document.querySelectorAll('.accordion-header').forEach(header => { header.addEventListener('click', () => { const accordionItem = header.parentElement; const isActive = accordionItem.classList.contains('active'); document.querySelectorAll('.accordion-item').forEach(item => { item.classList.remove('active'); }); if (!isActive) { accordionItem.classList.add('active'); } }); }); </script> </body> </html>