0

I am trying to populate an FAQs section with a UI that hides and shows the answers depending on when the user clicks to view the answer, but for some reasons the answers still shows without clicking hide or show button from the second array onwards.

The first array however is being rendered as normal, i think this has to do more on the view component than from my Livewire component.

Also when i open an answer, the other answers needs to be closed if they hsave been open

<div class="wow fadeInUp">
            @foreach ($faqs as $key => $faq)
            <div x-data="{selected:0}">
              <!-- faq item -->
                <div class="flex flex-col border-b border-white/[0.15]">
                    <h4 @click="selected !== 0 ? selected = 0 : selected = null"
                      class="cursor-pointer flex justify-between items-center font-semibold text-[22px] leading-[28px] py-5 lg:py-7"
                      :class="selected == 0 ? 'text-white' : ''">
                        {{ $faq->question }}
                      <span :class="selected == 0 ? 'hidden' : 'block'">
                        <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none"
                          xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M22.5 11.1752H12.8625V1.5002C12.8625 1.0502 12.4875 0.637695 12 0.637695C11.55 0.637695 11.1375 1.0127 11.1375 1.5002V11.1752H1.50001C1.05001 11.1752 0.637512 11.5502 0.637512 12.0377C0.637512 12.4877 1.01251 12.9002 1.50001 12.9002H11.175V22.5002C11.175 22.9502 11.55 23.3627 12.0375 23.3627C12.4875 23.3627 12.9 22.9877 12.9 22.5002V12.8627H22.5C22.95 12.8627 23.3625 12.4877 23.3625 12.0002C23.3625 11.5502 22.95 11.1752 22.5 11.1752Z"
                            fill="" />
                        </svg>
                      </span>

                      <span :class="selected == 0 ? 'block' : 'hidden'">
                        <svg width="22" height="2" viewBox="0 0 22 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M21.125 1.86263H0.875012C0.425012 1.86263 0.0125122 1.48763 0.0125122 1.00013C0.0125122 0.550134 0.387512 0.137634 0.875012 0.137634H21.125C21.575 0.137634 21.9875 0.512634 21.9875 1.00013C21.9875 1.45013 21.575 1.86263 21.125 1.86263Z"
                            fill="white" />
                        </svg>
                      </span>
                    </h4>
                    <p x-show="selected == 0" class="font-medium pb-7">
                        {!! $faq->answer !!}
                    </p>
                  </div>
            </div>
            @endforeach
          </div>

display when i have clicked to close question

display when i have clicked to open question

I have tried using a @foreach and $key to populate my $faq->data as shown below.

@foreach ($faqs as $key => $faq)
    <div x-data="{ selected: null }">
        <!-- FAQ item -->
        <div class="flex flex-col border-b border-white/[0.15]">
            <h4 
                @click="selected !== {{ $key }} ? selected = {{ $key }} : selected = null"
                class="cursor-pointer flex justify-between items-center font-semibold text-[22px] leading-[28px] py-5 lg:py-7"
                :class="selected == {{ $key }} ? 'text-white' : ''">
                {{ $faq->question }}
                <span :class="selected == {{ $key }} ? 'hidden' : 'block'">
                    <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M22.5 11.1752H12.8625V1.5002C12.8625 1.0502 12.4875 0.637695 12 0.637695C11.55 0.637695 11.1375 1.0127 11.1375 1.5002V11.1752H1.50001C1.05001 11.1752 0.637512 11.5502 0.637512 12.0377C0.637512 12.4877 1.01251 12.9002 1.50001 12.9002H11.175V22.5002C11.175 22.9502 11.55 23.3627 12.0375 23.3627C12.4875 23.3627 12.9 22.9877 12.9 22.5002V12.8627H22.5C22.95 12.8627 23.3625 12.4877 23.3625 12.0002C23.3625 11.5502 22.95 11.1752 22.5 11.1752Z"
                            fill="" />
                    </svg>
                </span>
                <span :class="selected == {{ $key }} ? 'block' : 'hidden'">
                    <svg width="22" height="2" viewBox="0 0 22 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M21.125 1.86263H0.875012C0.425012 1.86263 0.0125122 1.48763 0.0125122 1.00013C0.0125122 0.550134 0.387512 0.137634 0.875012 0.137634H21.125C21.575 0.137634 21.9875 0.512634 21.9875 1.00013C21.9875 1.45013 21.575 1.86263 21.125 1.86263Z"
                            fill="white" />
                    </svg>
                </span>
            </h4>
            <p x-show="selected == {{ $key }}" class="font-medium pb-7">
                {!! $faq->answer !!}
            </p>
        </div>
    </div>
@endforeach

I was expecting it to be like below image:

close answer

open answer

I am using Lravel and Livewire components in laravel and TailwindCSS

Improve this question
2
  • first thing that comes to my mind is that x-data is set multiple times and it can only be defined once if i am correct so it actualy only uses the first x-data and when the second is defined the livewire stops listening. so the solution would probably be to set the x-data above the foreach loop Commented Nov 20, 2024 at 13:48
  • For starters, x-data should be moved up one level outside of your foreach loop. Commented Nov 20, 2024 at 14:56
Related questions
795
How do I pass variables and data from PHP to JavaScript?
354
How to Set Variables in a Laravel Blade Template
638
How to pass an array within a query string?
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.