Accordion

Accordion

This is the primary button, this should be used for a call to action. A interface element, should contain 1 primary button.

<div x-data class="grid gap-3">
  <div class="accordion | grid border border-grey-300 rounded-bl-md" x-disclosure>
    <button
      x-disclosure:button
      class="accordion--trigger | group flex gap-4 justify-between items-center px-5 py-4 md:px-7 md:py-6 lg:px-10 lg:py-8 text-left focus-visible:outline-none"
    >
      <h3 class="group-hover:text-blue-500">Question #1</h3>
      <svg
        class="icon-plus | h-4 lg:h-6 text-red-500 flex-shrink-0 flex-grow-0"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
      >
        <!-- SVG content -->
      </svg>
      <svg
        class="icon-min | h-4 lg:h-6 text-red-500 flex-shrink-0 flex-grow-0"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
      >
        <!-- SVG content -->
      </svg>
    </button>

    <div x-disclosure:panel x-collapse class="-mt-1 lg:-mt-4 px-5 md:px-7 lg:px-10 pb-5 lg:pb-8 flow overflow-hidden">
      Lorem ipsum dolor sit...
    </div>
  </div>

  <div class="accordion | grid border border-grey-300 rounded-bl-md" x-disclosure>
    <button
      x-disclosure:button
      class="accordion--trigger | group flex gap-4 justify-between items-center px-5 py-4 md:px-7 md:py-6 lg:px-10 lg:py-8 text-left focus-visible:outline-none"
    >
      <h3 class="group-hover:text-blue-500">Question #2</h3>
      <svg
        class="icon-plus | h-4 lg:h-6 text-red-500 flex-shrink-0 flex-grow-0"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
      >
        <!-- SVG content -->
      </svg>
      <svg
        class="icon-min | h-4 lg:h-6 text-red-500 flex-shrink-0 flex-grow-0"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
      >
        <!-- SVG content -->
      </svg>
    </button>

    <div x-disclosure:panel x-collapse class="-mt-1 lg:-mt-4 px-5 md:px-7 lg:px-10 pb-5 lg:pb-8 flow overflow-hidden">
      Lorem ipsum dolor sit...
    </div>
  </div>
</div>