← Back

FAQ

Frequently Asked Questions

Do I have full control over booking availability?

I have additional amenities for hire. How do I include these?

Question 3

Question 4

View more on our FAQ page

Code:

<section class="p-5 py-8 lg:py-12 xl:py-20 bg-gradient-to-t from-zinc-950 to-zinc-800">
  <div class="max-w-7xl m-auto grid gap-8 grid-cols-1 lg:grid-cols-2">
    <h2 class="text-gradient-light text-2xl lg:text-3xl xl:text-4xl lg:text-left text-center font-semibold leading-none tracking-tight">Frequently Asked Questions</h2>
    <div>
      <div class="accordion-container rounded-xl border border-zinc-700 text-white overflow-hidden">
        
          <div class="accordion  transition-all hover:bg-white hover:bg-opacity-5">
            <button id="accordion-header-1"
                    aria-expanded="false"
                    aria-controls="accordion-panel-1"
                    data-accordion-header
                    class="w-full px-5 py-4 flex flex-nowrap items-center justify-between text-base text-left font-semibold">
              <h3 class="text-left pr-4 text-gradient-light inline-block text-transparent bg-clip-text tracking-tight">Do I have full control over booking availability?</h3>
              <img src="/assets/images/icons/Plus.svg" alt="" width="28" height="28" class="accordion-open">
              <img src="/assets/images/icons/Minus.svg" alt="" width="28" height="28" class="accordion-close">
            </button>
            <section id="accordion-panel-1"
                      aria-labelledby="accordion-header-1"
                      hidden class="p-5 pt-0">
              <p class="max-w-3xl text-sm font-regular text-zinc-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet.</p>
            </section>
          </div>
        
          <div class="accordion border-t border-zinc-700 transition-all hover:bg-white hover:bg-opacity-5">
            <button id="accordion-header-2"
                    aria-expanded="false"
                    aria-controls="accordion-panel-2"
                    data-accordion-header
                    class="w-full px-5 py-4 flex flex-nowrap items-center justify-between text-base text-left font-semibold">
              <h3 class="text-left pr-4 text-gradient-light inline-block text-transparent bg-clip-text tracking-tight">I have additional amenities for hire. How do I include these?</h3>
              <img src="/assets/images/icons/Plus.svg" alt="" width="28" height="28" class="accordion-open">
              <img src="/assets/images/icons/Minus.svg" alt="" width="28" height="28" class="accordion-close">
            </button>
            <section id="accordion-panel-2"
                      aria-labelledby="accordion-header-2"
                      hidden class="p-5 pt-0">
              <p class="max-w-3xl text-sm font-regular text-zinc-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet.</p>
            </section>
          </div>
        
          <div class="accordion border-t border-zinc-700 transition-all hover:bg-white hover:bg-opacity-5">
            <button id="accordion-header-3"
                    aria-expanded="false"
                    aria-controls="accordion-panel-3"
                    data-accordion-header
                    class="w-full px-5 py-4 flex flex-nowrap items-center justify-between text-base text-left font-semibold">
              <h3 class="text-left pr-4 text-gradient-light inline-block text-transparent bg-clip-text tracking-tight">Question 3</h3>
              <img src="/assets/images/icons/Plus.svg" alt="" width="28" height="28" class="accordion-open">
              <img src="/assets/images/icons/Minus.svg" alt="" width="28" height="28" class="accordion-close">
            </button>
            <section id="accordion-panel-3"
                      aria-labelledby="accordion-header-3"
                      hidden class="p-5 pt-0">
              <p class="max-w-3xl text-sm font-regular text-zinc-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet.</p>
            </section>
          </div>
        
          <div class="accordion border-t border-zinc-700 transition-all hover:bg-white hover:bg-opacity-5">
            <button id="accordion-header-4"
                    aria-expanded="false"
                    aria-controls="accordion-panel-4"
                    data-accordion-header
                    class="w-full px-5 py-4 flex flex-nowrap items-center justify-between text-base text-left font-semibold">
              <h3 class="text-left pr-4 text-gradient-light inline-block text-transparent bg-clip-text tracking-tight">Question 4</h3>
              <img src="/assets/images/icons/Plus.svg" alt="" width="28" height="28" class="accordion-open">
              <img src="/assets/images/icons/Minus.svg" alt="" width="28" height="28" class="accordion-close">
            </button>
            <section id="accordion-panel-4"
                      aria-labelledby="accordion-header-4"
                      hidden class="p-5 pt-0">
              <p class="max-w-3xl text-sm font-regular text-zinc-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet.</p>
            </section>
          </div>
        
      </div>
      <a href="#" class="text-mint-500 flex flex-nowrap items-center mt-7">
        <p class="mr-2 text-base">View more on our FAQ page</p>
        <img src="/assets/images/icons/ArrowRight.svg" alt="">
      </a>
    </div>
  </div>
</section>

const accordionHeaders = document.querySelectorAll('[data-accordion-header]');

if (accordionHeaders.length > 0) {
  accordionHeaders.forEach(header => {
    let target = header.nextElementSibling;
  
    header.addEventListener('click', () => {
      let expanded = header.getAttribute('aria-expanded') === 'true' || false;
      header.setAttribute('aria-expanded', !expanded);
      target.hidden = expanded;
    })
  });
}