I have problem with all flowbite components.
- The problem is that the components loads but the interactions doesn't work. for instance this accordion is open and I can't close it neither can I open.
- Also the models and carousels they loads but the JavaScript (Interaction) is not working. For instance, I can't close the modal and I can't change the slide in Carousel.
- I used this guide to install
- I use vue 3, Tailwind 3 and laravel 9
This is an example of the accordion:
<template>
<div id="accordion-arrow-icon" data-accordion="open">
<h2 id="accordion-arrow-icon-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-900 bg-gray-100 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-arrow-icon-body-1" aria-expanded="true" aria-controls="accordion-arrow-icon-body-1">
<span>Accordion without an arrow</span>
</button>
</h2>
<div id="accordion-arrow-icon-body-1" aria-labelledby="accordion-arrow-icon-heading-1">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-arrow-icon-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-arrow-icon-body-2" aria-expanded="false" aria-controls="accordion-arrow-icon-body-2">
<span>Accordion with another icon</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"></path></svg>
</button>
</h2>
<div id="accordion-arrow-icon-body-2" class="hidden" aria-labelledby="accordion-arrow-icon-heading-2">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-arrow-icon-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-arrow-icon-body-3" aria-expanded="false" aria-controls="accordion-arrow-icon-body-3">
<span>Accordion without arrow rotation</span>
<svg class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-arrow-icon-body-3" class="hidden" aria-labelledby="accordion-arrow-icon-heading-3">
<div class="p-5 font-light border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="https://flowbite.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
</template>
Javascript
// create an array of objects with the id, trigger element (eg. button), and the content element
const accordionItems = [
{
id: 'accordion-example-heading-1',
triggerEl: document.querySelector('#accordion-example-heading-1'),
targetEl: document.querySelector('#accordion-example-body-1'),
active: true
},
{
id: 'accordion-example-heading-2',
triggerEl: document.querySelector('#accordion-example-heading-2'),
targetEl: document.querySelector('#accordion-example-body-2'),
active: false
},
{
id: 'accordion-example-heading-3',
triggerEl: document.querySelector('#accordion-example-heading-3'),
targetEl: document.querySelector('#accordion-example-body-3'),
active: false
}
];
// options with default values
const options = {
alwaysOpen: true,
activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
inactiveClasses: 'text-gray-500 dark:text-gray-400',
onOpen: (item) => {
console.log('accordion item has been shown');
console.log(item);
},
onClose: (item) => {
console.log('accordion item has been hidden');
console.log(item);
},
onToggle: (item) => {
console.log('accordion item has been toggled');
console.log(item);
},
};
This accordion is open and I can't close it, as well as Modal or carousel to change the slide.
