The FAQ component provides a streamlined way to present frequently asked questions on your site, enhancing user experience by addressing common queries in a structured format. This component leverages Laravel’s localization capabilities, allowing you to offer FAQs in multiple languages easily.

​
Defining Your FAQs

You can manage the FAQs for your site by editing the relevant language files. By default, the FAQs are defined in lang/en/faq.php. To support multiple languages, you can create additional faq.php files within the respective language directories, such as lang/fr/faq.php for French or lang/es/faq.php for Spanish.

The faq.php file returns an array of title and content for the FAQ.

<?php

return [
    [
        'title' => 'Faq 1',
        'content' => 'Faq Content 1',
    ],
    [
        'title' => 'Faq 2',
        'content' => 'Faq Content 2',
    ],
    [
        'title' => 'Faq 3',
        'content' => 'Faq Content 3',
    ],
    [
        'title' => 'Faq 4',
        'content' => 'Faq Content 4',
    ],
];

​
FAQ component

resources/views/livewire/faq.blade.php
<div class="py-8 sm:py-16 px-8">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
            <p class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">FAQs</p>
            <p class="mt-6 text-lg leading-8">Have questions? We've got you covered! </p>
        </div>
    </div>
    <div class="mx-auto max-w-3xl mt-8">
        <div class="join join-vertical w-full">
            @foreach($faqs as $key => $faq)
                <div wire:key="{{ $key }}"
                     wire:click="toggleFaq({{$key}})"
                     class="collapse collapse-arrow join-item border border-base-300">
                    <input type="radio" id="'faq-'{{ $key }}" name="my-accordion" {{ $selectedFaq === $key ? 'checked' : '' }}/>
                    <div class="collapse-title text-xl font-medium">
                        {{ $faq['title'] }}
                    </div>
                    <div class="collapse-content">
                        <p>{{ $faq['content'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

For more examples check https://daisyui.com/components/accordion/

TestimonialCTA