Dynamic Accordion Component using Laravel Livewire

Tech Stack: tailwindcss, alpine-js, livewire

Demo

Fetching User Profile
Fetching User Profile
Fetching User Profile
Fetching User Profile
Fetching User Profile
Fetching User Profile

Code

Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro

Usage

This component makes use of a Blade Component named accordion. The front-end of accordion is built using TailwindCSS and AlpineJS. You can render the accordion component in below manner 

 <x-accordion>
        <x-accordion.item>
        <x-slot:heading>
            {{$name}}
        </x-slot>
        <!-- Accordion Content -->
        <div class="content-block">
            @livewire('pro.accordions.github-profile-accordion', ['username' => $username])
        </div>
        </x-accordion.item>
    </x-accordion>
The heading of the Accordion goes inside the heading slot and the content of the accordion goes inside content-block

Documentation

In the code section you'll find two Livewire components. AccordionDemo component is for the demo and GithubProfileAccordion contains the code which fetches the dynamic content when user opens up the accordion.

To create a accordion blade component, copy the files index.blade.php and item.blade.php in directory resources > views > components > accordion