How do you get Instance using API ?, and how do you get the current state of it ?

[ChaerilM]

i have tried

      console.log(FlowbiteInstances.getInstance('Collapse'));
      console.log(FlowbiteInstances.getInstance('Collapse', 'mega-menu-dewasa'));
      console.log(FlowbiteInstances.getInstance('Collapse', 'mega-menu-dewasa-button'));
      $all = FlowbiteInstances.getAllInstances();
      console.log($all['Collapse']);

with result

 Flowbite: Instance with ID undefined does not exist. instances.ts:152:20
17:01:18.192 undefined localhost:483:15
17:01:18.192 Flowbite: Instance with ID mega-menu-dewasa does not exist. instances.ts:152:20
17:01:18.192 undefined localhost:484:15
17:01:18.192 Flowbite: Instance with ID mega-menu-dewasa-button does not exist. instances.ts:152:20
17:01:18.192 undefined localhost:485:15
17:01:18.192 17:01:18.192
Object {  }
​
"mega-menu-anak": Object { _instanceId: "mega-menu-anak", _visible: false, _initialized: true, … }
​
"mega-menu-dewasa": Object { _instanceId: "mega-menu-dewasa", _visible: false, _initialized: true, … }
​
"navbar-search": Object { _instanceId: "navbar-search", _visible: false, _initialized: true, … }
​​
_clickHandler: function _clickHandler()
​​
_initialized: true
​​
_instanceId: "navbar-search"
​​
_options: Object { onCollapse: onCollapse(), onExpand: onExpand(), onToggle: onToggle() }
​​
_targetEl: <div id="navbar-search" class="hidden w-full items-cent…der-1 md:flex md:w-auto">
​​
_triggerEl: <button class="dark:text-gray-400 dark:…ring-gray-200 md:hidden" data-collapse-toggle="navbar-search" type="button" aria-controls="navbar-search" aria-expanded="false">
​​
_visible: false
​​
<prototype>: Object { init: init(), destroy: destroy(), removeInstance: removeInstance(), … }
​
<prototype>: Object { … }
localhost:487:15

but then when i go with console.log($all['Collapse']['mega-menu-dewasa']); it gives me undefined.

how do you use this?

[zoltanszogyenyi]

Hey @ChaerilM,

Please make sure that the window or document is loaded:

window.addEventListener('load', function() {
    const modal = FlowbiteInstances.getInstance('Modal', 'modal-id');
})

More on this here: https://flowbite.com/docs/getting-started/javascript/#instance-manager

[ChaerilM]

i use document.addEventListener('DOMContentLoaded', function() { is it wrong?

edit: i have also tried livewire's @script

[zoltanszogyenyi]

Please read my message and use window on load.

[ChaerilM]

Yes, thanks. i have tried it and its now giving me the element. although i have no idea what to do next. I simply want when a collapse menu is opened. others should be closed. tried .hide(), .open() for like an hour until i found about .collapse(). i hope mega menu doc would have javascript usage link, that linked to navbar collapse.