Accordion Menu in Bootstrap

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Ionicons -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<div class="container">
  <div class="main-container">
    <div class="page-header">
      <h1>Bootstrap Accordion Menu</h1>
      <p>Responsive accordion using Bootstrap 5 components</p>
    </div>

    <!-- Control Buttons -->
    <div class="control-buttons d-flex gap-2 flex-wrap">
      <button class="btn btn-primary btn-custom" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false">
        <ion-icon name="expand-outline" style="vertical-align: middle;"></ion-icon>
        Toggle All
      </button>
      <button class="btn btn-outline-secondary btn-custom" id="collapseAllBtn">
        <ion-icon name="contract-outline" style="vertical-align: middle;"></ion-icon>
        Collapse All
      </button>
    </div>

    <!-- Main Accordion -->
    <div class="accordion custom-accordion" id="mainAccordion">

      <!-- Item 1: Web Development -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <span class="accordion-icon">
              <ion-icon name="code-slash-outline"></ion-icon>
            </span>
            <span>
              Web Development
              <span class="feature-badge badge-primary">Popular</span>
            </span>
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse multi-collapse" data-bs-parent="#mainAccordion">
          <div class="accordion-body">
            <p><strong>Full-stack web development services</strong> with modern technologies and frameworks.</p>
            <ul class="mb-0">
              <li><strong>Frontend:</strong> React, Vue.js, Angular, HTML5, CSS3</li>
              <li><strong>Backend:</strong> Node.js, Python Django, PHP Laravel</li>
              <li><strong>Database:</strong> MySQL, PostgreSQL, MongoDB</li>
              <li><strong>DevOps:</strong> Docker, Kubernetes, CI/CD pipelines</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Item 2: Mobile Development -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <span class="accordion-icon">
              <ion-icon name="phone-portrait-outline"></ion-icon>
            </span>
            <span>
              Mobile Development
              <span class="feature-badge badge-success">Trending</span>
            </span>
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse multi-collapse" data-bs-parent="#mainAccordion">
          <div class="accordion-body">
            <p><strong>Native and cross-platform</strong> mobile applications for iOS and Android.</p>
            <ul class="mb-0">
              <li><strong>Native:</strong> Swift for iOS, Kotlin for Android</li>
              <li><strong>Cross-platform:</strong> React Native, Flutter</li>
              <li><strong>Features:</strong> Push notifications, In-app purchases, Offline mode</li>
              <li><strong>Publishing:</strong> App Store & Google Play optimization</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Item 3: UI/UX Design with Nested Accordion -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            <span class="accordion-icon">
              <ion-icon name="color-palette-outline"></ion-icon>
            </span>
            <span>
              UI/UX Design
              <span class="feature-badge badge-warning">Creative</span>
            </span>
          </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse multi-collapse" data-bs-parent="#mainAccordion">
          <div class="accordion-body">
            <p><strong>User-centered design</strong> that combines aesthetics with functionality.</p>

            <!-- Nested Accordion -->
            <div class="accordion nested-accordion mt-3" id="nestedAccordion">
              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nestedOne">
                    <ion-icon name="search-outline" style="margin-right: 8px;"></ion-icon>
                    Research & Discovery
                  </button>
                </h3>
                <div id="nestedOne" class="accordion-collapse collapse">
                  <div class="accordion-body">
                    User interviews, surveys, competitive analysis, and persona development to understand your users.
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nestedTwo">
                    <ion-icon name="git-branch-outline" style="margin-right: 8px;"></ion-icon>
                    Wireframing & Prototyping
                  </button>
                </h3>
                <div id="nestedTwo" class="accordion-collapse collapse">
                  <div class="accordion-body">
                    Interactive prototypes and wireframes using Figma, Sketch, and Adobe XD for validation.
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nestedThree">
                    <ion-icon name="brush-outline" style="margin-right: 8px;"></ion-icon>
                    Visual Design
                  </button>
                </h3>
                <div id="nestedThree" class="accordion-collapse collapse">
                  <div class="accordion-body">
                    High-fidelity designs with consistent branding, typography, and color systems.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Item 4: Cloud Services -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
            <span class="accordion-icon">
              <ion-icon name="cloud-outline"></ion-icon>
            </span>
            <span>
              Cloud Services
              <span class="feature-badge badge-info">Enterprise</span>
            </span>
          </button>
        </h2>
        <div id="collapseFour" class="accordion-collapse collapse multi-collapse" data-bs-parent="#mainAccordion">
          <div class="accordion-body">
            <p><strong>Scalable cloud infrastructure</strong> and migration services for your business.</p>
            <ul class="mb-0">
              <li><strong>Platforms:</strong> AWS, Microsoft Azure, Google Cloud Platform</li>
              <li><strong>Services:</strong> Serverless, Containerization, Microservices</li>
              <li><strong>Migration:</strong> Lift-and-shift, Re-platforming, Refactoring</li>
              <li><strong>Management:</strong> Monitoring, Auto-scaling, Cost optimization</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Item 5: Security & Compliance -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
            <span class="accordion-icon">
              <ion-icon name="shield-checkmark-outline"></ion-icon>
            </span>
            <span>
              Security & Compliance
              <span class="feature-badge badge-danger">Critical</span>
            </span>
          </button>
        </h2>
        <div id="collapseFive" class="accordion-collapse collapse multi-collapse" data-bs-parent="#mainAccordion">
          <div class="accordion-body">
            <p><strong>Comprehensive security solutions</strong> to protect your digital assets.</p>
            <ul class="mb-0">
              <li><strong>Security Audits:</strong> Penetration testing, Vulnerability scanning</li>
              <li><strong>Compliance:</strong> GDPR, HIPAA, SOC 2, ISO 27001</li>
              <li><strong>Protection:</strong> DDoS mitigation, WAF, SSL/TLS encryption</li>
              <li><strong>Training:</strong> Security awareness, Best practices</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Item 6: Support & Maintenance -->
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
            <span class="accordion-icon">
              <ion-icon name="headset-outline"></ion-icon>
            </span>
            <span>
              Support & Maintenance
              <span class="feature-badge badge-primary">24/7</span>
            </span>
          </button>
        </h2>
        <div id="collapseSix" class="accordion-collapse collapse multi-collapse" data-bs-parent="#mainAccordion">
          <div class="accordion-body">
            <p><strong>Round-the-clock support</strong> to keep your systems running smoothly.</p>
            <ul class="mb-0">
              <li><strong>Monitoring:</strong> Real-time alerts, Performance tracking</li>
              <li><strong>Updates:</strong> Security patches, Feature enhancements</li>
              <li><strong>Support:</strong> Email, Phone, Live chat support</li>
              <li><strong>SLA:</strong> 99.9% uptime guarantee</li>
            </ul>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

   body {
            background: linear-gradient(135deg, #B2BEB5 0%, #36454F 100%);
            min-height: 100vh;
            padding: 40px 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }

        .main-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 50px 40px;
        }

        .page-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .page-header h1 {
            color: #2c3e50;
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .page-header p {
            color: #7f8c8d;
            font-size: 16px;
        }

        /* Custom Bootstrap Accordion Styling */
        .custom-accordion .accordion-item {
            border: 2px solid #e9ecef;
            border-radius: 10px !important;
            margin-bottom: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .custom-accordion .accordion-item:hover {
            border-color: #3498db;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
        }

        .custom-accordion .accordion-button {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            padding: 20px 24px;
            background-color: white;
            box-shadow: none;
        }

        .custom-accordion .accordion-button:not(.collapsed) {
            background-color: #f8f9fa;
            color: #3498db;
            box-shadow: none;
        }

        .custom-accordion .accordion-button:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
        }

        .custom-accordion .accordion-button::after {
            width: 32px;
            height: 32px;
            background-color: #e3f2fd;
            border-radius: 50%;
            background-size: 1rem;
            background-position: center;
            transition: all 0.3s ease;
        }

        .custom-accordion .accordion-button:not(.collapsed)::after {
            background-color: #3498db;
            transform: rotate(180deg);
        }

        .custom-accordion .accordion-body {
            padding: 20px 24px;
            background-color: #f8f9fa;
            color: #5a6c7d;
            font-size: 15px;
            line-height: 1.8;
        }

        .accordion-icon {
            width: 40px;
            height: 40px;
            background: #e3f2fd;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }

        .accordion-icon ion-icon {
            font-size: 22px;
            color: #3498db;
        }

        .feature-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 10px;
            margin-left: 8px;
        }

        .badge-primary {
            background: #e3f2fd;
            color: #1976d2;
        }

        .badge-success {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .badge-warning {
            background: #fff3e0;
            color: #e65100;
        }

        .badge-danger {
            background: #ffebee;
            color: #c62828;
        }

        .badge-info {
            background: #e0f7fa;
            color: #00838f;
        }

        .control-buttons {
            margin-bottom: 30px;
        }

        .btn-custom {
            padding: 10px 20px;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .btn-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* Nested Accordion Styling */
        .nested-accordion .accordion-item {
            border: 1px solid #dee2e6;
            margin-bottom: 8px;
        }

        .nested-accordion .accordion-button {
            font-size: 15px;
            padding: 12px 16px;
            background-color: white;
        }

        .nested-accordion .accordion-button:not(.collapsed) {
            background-color: #f1f3f5;
        }

        .nested-accordion .accordion-body {
            padding: 12px 16px;
            background-color: white;
        }

        @media (max-width: 768px) {
            .main-container {
                padding: 30px 20px;
            }

            .page-header h1 {
                font-size: 28px;
            }

            .custom-accordion .accordion-button {
                font-size: 16px;
                padding: 16px 18px;
            }
        }

    // Collapse all functionality
        document.getElementById('collapseAllBtn').addEventListener('click', function() {
            const collapseElements = document.querySelectorAll('.accordion-collapse.show');
            collapseElements.forEach(element => {
                const bsCollapse = bootstrap.Collapse.getInstance(element);
                if (bsCollapse) {
                    bsCollapse.hide();
                }
            });
        });

        // Optional: Track accordion state
        const accordionElement = document.getElementById('mainAccordion');
        accordionElement.addEventListener('shown.bs.collapse', function (event) {
            console.log('Opened:', event.target.id);
        });

        accordionElement.addEventListener('hidden.bs.collapse', function (event) {
            console.log('Closed:', event.target.id);
        });