Professional Collapse Component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Collapse Component</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .collapse-container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }
        .collapse-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #007bff;
            color: #fff;
            padding: 15px 20px;
            cursor: pointer;
            border-radius: 8px;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .collapse-header:hover {
            background-color: #0056b3;
        }
        .collapse-header .icon {
            font-size: 24px;
            transition: transform 0.3s ease;
        }
        .collapse-header.active .icon {
            transform: rotate(180deg);
        }
        .collapse-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
            background-color: #fff;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .collapse-content p {
            padding: 20px;
            margin: 0;
            color: #333;
        }
        .collapse-content.show {
            max-height: 500px;
        }
    </style>
</head>
<body>
<div class="collapse-container">
    <div class="collapse-header" onclick="toggleCollapse(this)">
        <span>📂 Click to Expand</span>
        <span class="icon">⬇️</span>
    </div>
    <div class="collapse-content">
        <p>🎉 Welcome to the most attractive and professional collapse component ever! 🚀<br>
        Here you can place any content you desire, be it text, images, or any other elements. This component is designed to be both functional and visually appealing, with smooth animations and intuitive design. Enjoy!</p>
    </div>
</div>
<script>
    function toggleCollapse(element) {
        const header = element;
        const content = header.nextElementSibling;
        header.classList.toggle('active');
        content.classList.toggle('show');
    }
</script>
</body>
</html>

Professional Collapse Component - MeggiTools