Detailbox Summary - 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>DetailBox Summary</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 right, #f953c6, #b91d73); height: 100vh; display: flex; justify-content: center; align-items: center; } .detail-box-container { width: 80%; max-width: 600px; background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; } .detail-box-header { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.5); padding: 15px; cursor: pointer; transition: background 0.3s, box-shadow 0.3s; } .detail-box-header:hover { background: rgba(255, 255, 255, 0.5); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .detail-box-header i { font-size: 1.5rem; transition: transform 0.3s; } .detail-box-content { max-height: 0; overflow: hidden; background: rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.5); transition: max-height 0.5s ease, padding 0.5s ease; padding: 0 15px; color: #fff; } .detail-box-content p { margin: 0; padding: 10px 0; } .detail-box-container.open .detail-box-content { max-height: 200px; /* Adjust based on content */ padding: 15px; } .detail-box-container.open .detail-box-header i { transform: rotate(180deg); } </style> </head> <body> <div class="detail-box-container"> <div class="detail-box-header"> <span>DetailBox</span> <i class="fas fa-chevron-down"></i> </div> <div class="detail-box-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> </div> <script> document.querySelector('.detail-box-header').addEventListener('click', function() { const container = document.querySelector('.detail-box-container'); container.classList.toggle('open'); }); </script> </body> </html>