Collapse

Toggle the visibility of content across your project with a few classes and Alpine js

Example

Click the buttons below to show and hide another element via alpine js

Link with href

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. 
                
                  <div x-data="{show:false}">
                    <p class="flex">
                      <a x-on:click.prevent="show=!show" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2">
                      Link with href
                      </a>
                      <button  @click="show=!show" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0" type="button">
                      Button with data-target
                      </button>
                    </p> 
                    <div x-show="show" class="border px-4 py-3 my-2 text-gray-700">
                      Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                    </div>
                  </div>

Accordion

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

                
                  <div id="Accordione" x-data="{selected:0}">
                    <!-- faq list -->
                    <div class="relative flex flex-wrap flex-col shadow mb-4 bg-white dark:bg-gray-800 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
                      <div class="py-2.5 px-5 border-b border-gray-200 mb-0 bg-gray-100 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-800" id="HeadingOnee">
                        <div class="d-grid mb-0">
                          <button class="py-3 px-5 w-full rounded-md leading-5 font-medium flex px-0 justify-between focus:outline-none focus:ring-0 text-gray-800 dark:text-gray-200"  @click="selected !== 0 ? selected = 0 : selected = null">
                            How is the SEO services system at TailPro?
                            <span>
                              <svg class="transform transition duration-500" :class="{ '-rotate-180': selected == 0 }" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z" clip-rule="evenodd"></path>
                              </svg>
                            </span>
                          </button>
                        </div>
                      </div>
                      <div id="CollapseOnee" x-show="selected == 0">
                        <div class="flex-1 p-5">
                          <p class="text-gray-500">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                        </div>
                      </div>
                    </div>

                    <!-- faq list -->
                    <div class="relative flex flex-wrap flex-col shadow mb-4 bg-white dark:bg-gray-800 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
                      <div class="py-2.5 px-5 border-b border-gray-200 mb-0 bg-gray-100 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-800" id="HeadingTwoe">
                        <div class="d-grid mb-0">
                          <button class="py-3 px-5 w-full rounded-md leading-5 font-medium flex px-0 justify-between focus:outline-none focus:ring-0 text-gray-800 dark:text-gray-200" @click="selected !== 1 ? selected = 1 : selected = null">
                            How many keywords are optimized?
                            <span>
                              <svg class="transform transition duration-500" :class="{ '-rotate-180': selected == 1 }" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z" clip-rule="evenodd"></path>
                              </svg>
                            </span>
                          </button>
                        </div>
                      </div>
                      <div id="CollapseTwoe" x-show="selected == 1">
                        <div class="flex-1 p-5">
                          <p class="text-gray-500">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                        </div>
                      </div>
                    </div>

                    <!-- faq list -->
                    <div class="relative flex flex-wrap flex-col shadow mb-4 bg-white dark:bg-gray-800 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
                      <div class="py-2.5 px-5 border-b border-gray-200 mb-0 bg-gray-100 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-800" id="HeadingThreee">
                        <div class="d-grid mb-0">
                          <button class="py-3 px-5 w-full rounded-md leading-5 font-medium flex px-0 justify-between focus:outline-none focus:ring-0 text-gray-800 dark:text-gray-200" @click="selected !== 2 ? selected = 2 : selected = null">
                            Do you offer any discounted plans?
                            <span>
                              <svg class="transform transition duration-500" :class="{ '-rotate-180': selected == 2 }" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z" clip-rule="evenodd"></path>
                              </svg>
                            </span>
                          </button>
                        </div>
                      </div>
                      <div id="CollapseThreee" x-show="selected == 2">
                        <div class="flex-1 p-5">
                          <p class="text-gray-500">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                        </div>
                      </div>
                    </div>

                    <!-- faq list -->
                    <div class="relative flex flex-wrap flex-col shadow mb-4 bg-white dark:bg-gray-800 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".7s">
                      <div class="py-2.5 px-5 border-b border-gray-200 mb-0 bg-gray-100 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-800" id="HeadingFoure">
                        <div class="d-grid mb-0">
                          <button class="py-3 px-5 w-full rounded-md leading-5 font-medium flex px-0 justify-between focus:outline-none focus:ring-0 text-gray-800 dark:text-gray-200" @click="selected !== 3 ? selected = 3 : selected = null">
                            Can I cancel my account at any time?
                            <span>
                              <svg class="transform transition duration-500" :class="{ '-rotate-180': selected == 3 }" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z" clip-rule="evenodd"></path>
                              </svg>
                            </span>
                          </button>
                        </div>
                      </div>
                      <div id="CollapseFoure" x-show="selected == 3">
                        <div class="flex-1 p-5">
                          <p class="text-gray-500">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                        </div>
                      </div>
                    </div>
                  </div>