Create a Responsive Smooth Accordion using Alpine.js and Tailwind CSS

By Bytewebster - January 30, 2023

Welcome to the bytewebster Project blogs. In this Javascript project we will make a responsive Smooth FAQ Accordion. For this we will use Tailwind CSS and Alpine.js Frameworks.

Working

An FAQ (Frequently Asked Questions) accordion is a user interface element that is commonly used on websites to display a list of frequently asked questions and their corresponding answers.

The accordion allows users to expand and collapse individual questions and answers, making it easy to navigate and find the information they need.

Detailed Overview of Project

This Tailwind CSS Accordion can help you to reduce clutter on your webpage, and make it more user-friendly and efficient for users to find the information they need.

You can use the classes provided by Tailwind CSS to create the necessary HTML structure for an accordion, and then use Alpine JS or another scripting language to add the functionality to expand and collapse the accordion sections.

HTML Structure

This is the HTML code for this accordion FAQ page using Tailwind CSS. The HTML code has a header with a title. and the title is centered and displayed in gray-600 text.

Below the header is a section with the tailwind classes, which sets the max width of the section to 2x the default width and centers it on the page. The section referred to is the part of the HTML code that displays the FAQ items in an accordion format.

The main section of this Accordion uses an alpine X-Template to loop through a list of FAQ items, displaying each question in a clickable format. When clicked, the corresponding answer is revealed. The format for each item includes a background color, shadow effect, rounded corners, and indigo text. The numbers for each question are displayed in a circle and change according to the index in the list.

The reveal effect for each answer is achieved through adjusting the "max-height" property in the CSS, and is animated using transition and duration effects. The answers are displayed with gray-700 text and are indented from the question text.

The two script tags include two JavaScript files in the HTML template. The first tag is a minified version of the Alpine.js library from a content delivery network (CDN). The second tag is a local script file named "script.js". This file likely includes custom JavaScript for the accordion.

<div class="pt-10 px-3 pb-20">
  <h1 class="text-gray-600 text-center">
    <div class="font-bold">
      Tailwind CSS Smooth FAQ Accordion - BYTEWEBSTER
    </div>
  </h1>

  <div class="my-10 max-w-2xl mx-auto space-y-4 lg:space-y-6" x-data="{ faq, faq_selected: null }">
    <template x-for="(item, index) in faq" :key="`item-{$index}`">
      <div class="item bg-white shadow-md rounded-md p-3">
        <div class="flex items-center cursor-pointer" @click="faq_selected !== index ? faq_selected = index : faq_selected = null">
          <div class="bg-indigo-100 text-indigo-400 w-8 h-8 md:w-10 md:h-10 rounded-md flex items-center justify-center font-bold text-lg font-display">
            <span x-text="index + 1"></span>
          </div>
          <div class="ml-3 md:ml-4 lg:ml-6 md:text-lg text-indigo-600">
            <span x-text="item.question"></span>
          </div>
        </div>
        <div class="relative overflow-hidden transition-all max-h-0 duration-700" x-bind:style="faq_selected === index ? `max-height:  ${ $el.scrollHeight }px` : ``">
          <div class="text-gray-700 ml-8 md:ml-10 pl-3 md:pl-4 lg:pl-6 py-2 space-y-3">
            <template x-for="(ans, index) in item.answer" :key="`item-ans-{$index}`">
              <p x-text="ans"></p>
            </template>
          </div>
        </div>
      </div>
    </template>
  </div>
</div>
  <script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js'></script>
  <script  src="./script.js"></script>

Styling With CSS

You don't even need to style after using Tailwind CSS, but It depends on your specific design requirements. Tailwind CSS provides a lot of pre-designed styles and classes, but it's possible that you may need to add additional styles to the accordion for it to match your desired look and feel.

For example, you may want to adjust the font size, add background colors, or change the animation style. In general, Tailwind CSS provides a foundation for styling, but you may need to make additional customizations.

We still have some basic styling in it, in this The first block sets the background color of the "body" element to a light blue (#A9C9FF) and applies a linear gradient that starts with the same color and gradually transitions to a pale pink (#FFBBEC).

The second block sets the "max-height" property to 0 for elements with the "max-h-0" class. This means that elements with this class will have a maximum height of 0 and therefore be hidden.

body{
  background-color: #A9C9FF;
  background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
}

.max-h-0 {
  max-height: 0
}

JavaScript Explanation

The div with x-data sets up the Alpine.js component and defines its data. open is a reactive data property and starts with a value of false, meaning that the FAQ content is hidden by default.

The button has a click event handler that toggles the value of open between true and false.

This is a JavaScript constant variable named faq that holds an array of objects. Each object in the array represents a question and answer in a FAQ. For example, the first object in the faq array represents a question and answer pair.

and it is also possible to make an FAQ accordion using other JavaScript libraries such as jQuery, React, Vue, or Angular. People prefer Alpine.js for several reasons because Alpine.js is a very lightweight library, which makes it fast and efficient to use. and the The syntax of Alpine.js is simple and straightforward, making it easy to pick up and start using even for those who are new to JavaScript frameworks.

Overall, Alpine.js provides a fast and simple way to add dynamic behavior to HTML pages, making it a popular choice for many web developers.

const faq = [
  {
    question: "What is ByteWebster",
    answer: [
      "ByteWebster is a Professional web development and coding blog website.",
      "Here you will find projects and coding blogs made from HTML, CSS, JavaScript and PHP"
    ]
  },
  {
    question: "",
    answer: [
      "",
      ""
    ]
  },
  {
    question: "",
    answer: [
      ""
    ]
  }
];

We appreciate you taking the time to read this article. We hope it was worth your while and that you enjoyed the project.