Web Components Library

Accordion Simple

No notes defined.

  • Handle: @testing-accordion-simple
  • Tags: alpine
  • Preview:
  • Filesystem Path: components/10-other-examples/testing-playground/misc/accordion-simple.hbs 
<div class="mx-4 mt-12">

    <h2 class="mb-6 text-gray-600">With SVG Icons:</h2>

    <div class="mb-8" x-data="{ isOpen: false }">

        <div class="flex items-center p-2 border-b border-gray-400 cursor-pointer" @click="isOpen = !isOpen">
            <h2 class="w-4/5 text-xl text-gray-800">
                Question
            </h2>
            <div class="relative w-1/5 h-8 text-gray-500">
                <svg x-show.transition="!isOpen" class="absolute right-0 w-8 h-8 fill-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>

                <svg x-show.transition="isOpen" class="absolute right-0 w-8 h-8 fill-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
                </svg>
            </div>
        </div>

        <div class="p-2" x-show.transition="isOpen" @click.away="isOpen = false" style="display: none;">
            <div class="pt-2 text-styling links">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>

    </div>

    <h2 class="mt-12 mb-6 text-gray-600">With Font Awesome icons</h2>

    <div class="mb-8" x-data="{ isOpen: false }">

        <div class="flex items-center p-2 border-b border-gray-400 cursor-pointer" @click="isOpen = !isOpen">
            <h2 class="w-4/5 text-xl text-gray-800">
                Question
            </h2>
            <div class="relative w-1/5 h-6 text-gray-500">
                <i class="absolute right-0 fa-lg fas fa-plus" x-show.transition="!isOpen"></i>
                <i class="absolute right-0 fa-lg fas fa-minus" x-show.transition="isOpen" style="display: none;"></i>
            </div>
        </div>

        <div class="p-2" x-show.transition="isOpen" @click.away="isOpen = false" style="display: none;">
            <div class="pt-2 text-styling links">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>

    </div>

</div>

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>
 
<div class="mx-4 mt-12">


    <h2 class="mb-6 text-gray-600">With SVG Icons:</h2>


    {{!-- Accordion code starts here --}}
    <div class="mb-8" x-data="{ isOpen: false }">

        <div class="flex items-center p-2 border-b border-gray-400 cursor-pointer" @click="isOpen = !isOpen">
            <h2 class="w-4/5 text-xl text-gray-800">
                {{ title }}
            </h2>
            <div class="relative w-1/5 h-8 text-gray-500">
                <svg x-show.transition="!isOpen" class="absolute right-0 w-8 h-8 fill-current"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>

                <svg x-show.transition="isOpen" class="absolute right-0 w-8 h-8 fill-current"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
                </svg>
            </div>
        </div>

        <div class="p-2" x-show.transition="isOpen" @click.away="isOpen = false" style="display: none;">
            <div class="pt-2 text-styling links">
                <p>{{ content }}</p>
            </div>
        </div>

    </div>
    {{!-- Accordion code ends here --}}


    <h2 class="mt-12 mb-6 text-gray-600">With Font Awesome icons</h2>

    {{!-- Accordion code starts here --}}

    <div class="mb-8" x-data="{ isOpen: false }">


        <div class="flex items-center p-2 border-b border-gray-400 cursor-pointer" @click="isOpen = !isOpen">
            <h2 class="w-4/5 text-xl text-gray-800">
                {{ title }}
            </h2>
            <div class="relative w-1/5 h-6 text-gray-500">
                <i class="absolute right-0 fa-lg fas fa-plus" x-show.transition="!isOpen"></i>
                <i class="absolute right-0 fa-lg fas fa-minus" x-show.transition="isOpen" style="display: none;"></i>
            </div>
        </div>

        <div class="p-2" x-show.transition="isOpen" @click.away="isOpen = false" style="display: none;">
            <div class="pt-2 text-styling links">
                <p>{{ content }}</p>
            </div>
        </div>

    </div>
    {{!-- Accordion code ends here --}}

</div>


<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>
 
{
  "title": "Question",
  "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}