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.
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.
<?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',
],
];
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>
