> ## Documentation Index
> Fetch the complete documentation index at: https://docs.larafast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# FAQ

> FAQ component doc

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 theme={null}
<?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

```html resources/views/livewire/faq.blade.php theme={null}
<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>
```

<Tip>
  For more examples check [https://daisyui.com/components/accordion/](https://daisyui.com/components/accordion/)
</Tip>