Accordion neon

sachin007
Jan 25, 2026 6
Live Preview

Live Editor

 <div class="accordion-container">
        <h1 class="accordion-title">⚡ Neon FAQ ⚡</h1>
        
        <div class="accordion-item">
            <div class="accordion-header">
                <div class="accordion-header-content">
                    <h3>What is 3D Design? <span class="badge">New</span></h3>
                    <div class="accordion-icon"></div>
                </div>
            </div>
            <div class="accordion-content">
                <div class="neon-line"></div>
                <div class="glow-particles">
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                </div>
                <div class="accordion-content-inner">
                    3D design is the process of creating three-dimensional digital representations of objects using specialized software. It involves modeling, texturing, lighting, and rendering to create realistic or stylized visuals for various applications including games, films, architecture, and product design.
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-header">
                <div class="accordion-header-content">
                    <h3>How Does Neon Effect Work?</h3>
                    <div class="accordion-icon"></div>
                </div>
            </div>
            <div class="accordion-content">
                <div class="neon-line"></div>
                <div class="glow-particles">
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                </div>
                <div class="accordion-content-inner">
                    Neon effects in web design are created using CSS properties like box-shadow, text-shadow, and filter effects combined with vibrant colors. Multiple layered shadows create the characteristic glow, while animations add the flickering or pulsing effect that mimics real neon lights.
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-header">
                <div class="accordion-header-content">
                    <h3>CSS Animations Explained <span class="badge">Hot</span></h3>
                    <div class="accordion-icon"></div>
                </div>
            </div>
            <div class="accordion-content">
                <div class="neon-line"></div>
                <div class="glow-particles">
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                </div>
                <div class="accordion-content-inner">
                    CSS animations allow elements to gradually change from one style to another. Using @keyframes, you define animation stages with different CSS properties. Combined with transform, transition, and timing functions, you can create smooth, performant animations without JavaScript.
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-header">
                <div class="accordion-header-content">
                    <h3>What is Transform-Style?</h3>
                    <div class="accordion-icon"></div>
                </div>
            </div>
            <div class="accordion-content">
                <div class="neon-line"></div>
                <div class="glow-particles">
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                </div>
                <div class="accordion-content-inner">
                    The transform-style CSS property determines whether child elements are positioned in 3D space or flattened. Setting it to "preserve-3d" allows nested elements to maintain their 3D transformations, enabling complex 3D effects and realistic depth in web designs.
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-header">
                <div class="accordion-header-content">
                    <h3>Performance Tips</h3>
                    <div class="accordion-icon"></div>
                </div>
            </div>
            <div class="accordion-content">
                <div class="neon-line"></div>
                <div class="glow-particles">
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                </div>
                <div class="accordion-content-inner">
                    For optimal performance with 3D effects: use transform and opacity for animations (GPU-accelerated), minimize box-shadows on large elements, reduce the number of animated particles, use will-change property sparingly, and test on lower-end devices to ensure smooth 60fps animations.
                </div>
            </div>
        </div>
    </div>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0a0a0a;
            font-family: 'Arial', sans-serif;
            perspective: 1500px;
            padding: 40px 20px;
        }

        .accordion-container {
            width: 600px;
            transform-style: preserve-3d;
            transform: rotateX(5deg);
        }

        .accordion-title {
            text-align: center;
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 40px;
            background: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-transform: uppercase;
            letter-spacing: 4px;
            text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
            animation: glow-title 3s ease-in-out infinite;
            transform: translateZ(50px);
        }

        @keyframes glow-title {
            0%, 100% { 
                filter: drop-shadow(0 0 20px #00ffff);
            }
            50% { 
                filter: drop-shadow(0 0 40px #ff00ff);
            }
        }

        .accordion-item {
            margin-bottom: 20px;
            transform-style: preserve-3d;
            transition: transform 0.3s ease;
        }

        .accordion-item:hover {
            transform: translateZ(20px);
        }

        .accordion-header {
            background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
            padding: 20px 25px;
            cursor: pointer;
            border: 2px solid #333;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            transform-style: preserve-3d;
            box-shadow: 
                0 8px 25px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .accordion-header::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #00ffff, #ff00ff, #00ff00, #00ffff);
            border-radius: 15px;
            opacity: 0;
            z-index: -1;
            transition: opacity 0.4s ease;
            animation: rotate-border 4s linear infinite;
        }

        @keyframes rotate-border {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .accordion-item.active .accordion-header::before {
            opacity: 1;
        }

        .accordion-item.active .accordion-header {
            border-color: transparent;
            background: linear-gradient(145deg, #1f1f1f, #151515);
            box-shadow: 
                0 0 30px rgba(0, 255, 255, 0.4),
                0 0 50px rgba(255, 0, 255, 0.3),
                0 8px 25px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transform: translateZ(10px);
        }

        .accordion-header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .accordion-header h3 {
            font-size: 20px;
            color: #888;
            transition: all 0.4s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .accordion-item.active .accordion-header h3 {
            color: #00ffff;
            text-shadow: 
                0 0 10px #00ffff,
                0 0 20px #00ffff,
                0 0 30px #00ffff;
        }

        .accordion-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.5),
                inset 0 2px 4px rgba(255, 255, 255, 0.1);
        }

        .accordion-item.active .accordion-icon {
            background: linear-gradient(145deg, #00ffff, #00cccc);
            box-shadow: 
                0 0 20px #00ffff,
                0 0 40px #00ffff,
                0 4px 15px rgba(0, 255, 255, 0.5);
            transform: rotate(180deg);
        }

        .accordion-icon::before,
        .accordion-icon::after {
            content: '';
            position: absolute;
            background: #666;
            transition: all 0.4s ease;
        }

        .accordion-icon::before {
            width: 16px;
            height: 2px;
        }

        .accordion-icon::after {
            width: 2px;
            height: 16px;
        }

        .accordion-item.active .accordion-icon::before,
        .accordion-item.active .accordion-icon::after {
            background: #000;
        }

        .accordion-item.active .accordion-icon::after {
            opacity: 0;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            background: linear-gradient(145deg, #151515, #0a0a0a);
            border: 2px solid transparent;
            border-top: none;
            border-radius: 0 0 15px 15px;
            margin-top: -15px;
            padding: 0 25px;
            position: relative;
            transform-style: preserve-3d;
        }

        .accordion-item.active .accordion-content {
            max-height: 500px;
            padding: 30px 25px 25px;
            border-color: #00ffff;
            box-shadow: 
                0 0 30px rgba(0, 255, 255, 0.2),
                inset 0 4px 10px rgba(0, 255, 255, 0.1);
        }

        .accordion-content-inner {
            color: #999;
            line-height: 1.8;
            font-size: 15px;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.5s ease 0.2s;
        }

        .accordion-item.active .accordion-content-inner {
            opacity: 1;
            transform: translateY(0);
        }

        .neon-line {
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 0;
            background: linear-gradient(to bottom, #00ffff, #ff00ff);
            border-radius: 4px;
            transition: height 0.5s ease;
            box-shadow: 
                0 0 10px #00ffff,
                0 0 20px #ff00ff;
        }

        .accordion-item.active .neon-line {
            height: 100%;
        }

        .glow-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .accordion-item.active .glow-particles {
            opacity: 1;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #00ffff;
            border-radius: 50%;
            box-shadow: 0 0 10px #00ffff;
        }

        .accordion-item.active .particle {
            animation: float-particle 3s ease-in-out infinite;
        }

        .particle:nth-child(1) {
            left: 10%;
            animation-delay: 0s;
        }

        .particle:nth-child(2) {
            left: 30%;
            animation-delay: 0.5s;
        }

        .particle:nth-child(3) {
            left: 50%;
            animation-delay: 1s;
        }

        .particle:nth-child(4) {
            left: 70%;
            animation-delay: 1.5s;
        }

        .particle:nth-child(5) {
            left: 90%;
            animation-delay: 2s;
        }

        @keyframes float-particle {
            0%, 100% {
                transform: translateY(0) scale(1);
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            50% {
                transform: translateY(-30px) scale(1.2);
                opacity: 0.8;
            }
            75% {
                opacity: 0.5;
            }
        }

        .badge {
            display: inline-block;
            padding: 4px 12px;
            background: linear-gradient(145deg, #ff00ff, #cc00cc);
            color: white;
            font-size: 11px;
            font-weight: 700;
            border-radius: 20px;
            margin-left: 10px;
            text-transform: uppercase;
            box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
            letter-spacing: 1px;
        }
        const accordionHeaders = document.querySelectorAll('.accordion-header');

        accordionHeaders.forEach(header => {
            header.addEventListener('click', () => {
                const accordionItem = header.parentElement;
                const isActive = accordionItem.classList.contains('active');

                // Close all accordion items
                document.querySelectorAll('.accordion-item').forEach(item => {
                    item.classList.remove('active');
                });

                // Open clicked item if it wasn't active
                if (!isActive) {
                    accordionItem.classList.add('active');
                }
            });
        });
Categories

Accordion neon

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
