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>
