<div class="max-w-5xl mx-auto">

    <!-- Accordion Container -->
    <div id="accordion" class="bg-white shadow overflow-hidden rounded-md">
  
      <!-- Accordion Item 1 -->
      <div class="accordion-item">
        <!-- Accordion Heading 1 -->
        <div class="accordion-header bg-gray-50 p-4 px-6 border-b">
          <button class="accordion-button text-gray-700">
            Section 1
          </button>
        </div>
  
        <!-- Accordion Content 1 -->
        <div class="accordion-content hidden bg-white p-4 text-gray-700">
          <p>Content for Section 1</p>
        </div>
      </div>
  
      <!-- Accordion Item 2 -->
      <div class="accordion-item">
        <!-- Accordion Heading 2 -->
        <div class="accordion-header bg-gray-50 p-4 px-6 border-b">
          <button class="accordion-button text-gray-700">
            Section 2
          </button>
        </div>
  
        <!-- Accordion Content 2 -->
        <div class="accordion-content hidden bg-white p-4 text-gray-700">
          <p>Content for Section 2</p>
        </div>
      </div>
  
      <!-- Add more accordion items as needed -->
  
    </div>
  
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
       const accordionItems = document.querySelectorAll('.accordion-item');
   
       accordionItems.forEach(item => {
         const accordionButton = item.querySelector('.accordion-button');
   
         accordionButton.addEventListener('click', () => {
           // Toggle the 'hidden' class on the clicked accordion content
           item.querySelector('.accordion-content').classList.toggle('hidden');
   
           // Hide other accordion items if they are open
           accordionItems.forEach(otherItem => {
             if (otherItem !== item && !otherItem.querySelector('.accordion-content').classList.contains('hidden')) {
               otherItem.querySelector('.accordion-content').classList.add('hidden');
             }
           });
         });
       });
     });
   </script>