Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Expand/Collapse Component</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 40px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .accordion-item {
            border-bottom: 1px solid #e2e8f0;
        }

        .accordion-item:last-child {
            border-bottom: none;
        }

        .accordion-header {
            background: #f8fafc;
            padding: 20px 24px;
            cursor: pointer;
            user-select: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            position: relative;
        }

        .accordion-header:hover {
            background: #f1f5f9;
        }

        .accordion-header.active {
            background: #3b82f6;
            color: white;
        }

        .accordion-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }

        .accordion-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }

        .accordion-icon::before {
            content: '+';
            font-size: 20px;
            font-weight: bold;
            line-height: 1;
        }

        .accordion-header.active .accordion-icon {
            transform: rotate(45deg);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .accordion-content.expanded {
            max-height: 1000px; /* Large enough value for most content */
        }

        .accordion-body {
            padding: 24px;
            color: #4a5568;
            line-height: 1.7;
        }

        .accordion-body h3 {
            color: #2d3748;
            margin-top: 0;
            margin-bottom: 16px;
        }

        .accordion-body p {
            margin-bottom: 16px;
        }

        .accordion-body ul {
            margin-bottom: 16px;
            padding-left: 20px;
        }

        .accordion-body li {
            margin-bottom: 8px;
        }

        /* Alternative smooth technique using grid */
        .accordion-content-alt {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .accordion-content-alt.expanded {
            grid-template-rows: 1fr;
        }

        .accordion-content-alt .accordion-body {
            overflow: hidden;
        }

        /* Demo styles */
        .demo-section {
            margin: 40px 0;
        }

        .demo-title {
            text-align: center;
            color: white;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .code-block {
            background: #1a202c;
            color: #e2e8f0;
            padding: 16px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="demo-section">
        <h1 class="demo-title">Smooth Expand/Collapse Components</h1>
    </div>

    <div class="container">
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <h3 class="accordion-title">What is this component?</h3>
                <div class="accordion-icon"></div>
            </div>
            <div class="accordion-content">
                <div class="accordion-body">
                    <p>This is a pure HTML and CSS accordion component that smoothly animates the expansion and collapse of content panels, regardless of their height.</p>
                    <p>The animation uses CSS transitions with a <code>max-height</code> property that transitions from 0 to a large value, creating a smooth reveal effect.</p>
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <h3 class="accordion-title">How does it work?</h3>
                <div class="accordion-icon"></div>
            </div>
            <div class="accordion-content">
                <div class="accordion-body">
                    <h3>Technical Implementation</h3>
                    <p>The smooth animation is achieved through several CSS techniques:</p>
                    <ul>
                        <li><strong>Max-height transition:</strong> We transition from <code>max-height: 0</code> to a large value</li>
                        <li><strong>Overflow hidden:</strong> Prevents content from showing during animation</li>
                        <li><strong>Cubic-bezier easing:</strong> Creates natural, smooth motion</li>
                        <li><strong>JavaScript toggle:</strong> Adds/removes the expanded class</li>
                    </ul>
                    <div class="code-block">
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-content.expanded {
    max-height: 1000px;
}
                    </div>
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <h3 class="accordion-title">Features & Benefits</h3>
                <div class="accordion-icon"></div>
            </div>
            <div class="accordion-content">
                <div class="accordion-body">
                    <h3>Key Features</h3>
                    <ul>
                        <li>Smooth animations regardless of content height</li>
                        <li>Pure CSS implementation (minimal JavaScript)</li>
                        <li>Accessible keyboard navigation</li>
                        <li>Responsive design</li>
                        <li>Customizable styling</li>
                        <li>No external dependencies</li>
                    </ul>
                    <p>This component works well for FAQs, navigation menus, content sections, and any interface where you need to show/hide content with smooth animations.</p>
                    <p>The max-height approach is reliable across all modern browsers and provides consistent performance even with varying content sizes.</p>
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <h3 class="accordion-title">Alternative Grid Technique</h3>
                <div class="accordion-icon"></div>
            </div>
            <div class="accordion-content-alt">
                <div class="accordion-body">
                    <h3>CSS Grid Alternative</h3>
                    <p>Here's an alternative approach using CSS Grid that can be even smoother:</p>
                    <div class="code-block">
.accordion-content-alt {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-content-alt.expanded {
    grid-template-rows: 1fr;
}
                    </div>
                    <p>This method uses CSS Grid's fractional units to create truly dynamic height animations without needing to guess a max-height value.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleAccordion(header) {
            const content = header.nextElementSibling;
            const isExpanded = content.classList.contains('expanded');

            // Close all other accordion items
            document.querySelectorAll('.accordion-content, .accordion-content-alt').forEach(item => {
                item.classList.remove('expanded');
            });

            document.querySelectorAll('.accordion-header').forEach(item => {
                item.classList.remove('active');
            });

            // Toggle current item
            if (!isExpanded) {
                content.classList.add('expanded');
                header.classList.add('active');
            }
        }

        // Optional: Add keyboard support
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                if (e.target.classList.contains('accordion-header')) {
                    e.preventDefault();
                    toggleAccordion(e.target);
                }
            }
        });

        // Make headers focusable for accessibility
        document.querySelectorAll('.accordion-header').forEach(header => {
            header.setAttribute('tabindex', '0');
            header.setAttribute('role', 'button');
            header.setAttribute('aria-expanded', 'false');
        });
    </script>
</body>
</html>