Multiple Dropdowns

[hellokvn]

Describe the solution you'd like

If I have multiple dropdowns, which you open/close by click (not by mouseover), then it would be great to have some kind of option to close every other dropdown when you open another dropdown.

[VizuaaLOG]

Hey @hellokvn ,

Thanks for your suggestion. I believe this will be possible when the extended API is implemented as this would allow you to listen for an open even and then manually close all of your other drop downs.

This may even be possible now by using one of the internal methods drop down has. Although this is undocumented and could change since its not intended for public use.

I'll make sure this is possible as part of the API additions as I do think it would be useful.

[terabytesoftw]

What is the best way to implement multiple dropdowns at this time ?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<div class="dropdown">
    <div class="dropdown-trigger">
        <button class="button" aria-haspopup="true" aria-controls="w0-dropdown">
            <span>Dropdown</span>
            <span class="icon is-small"><i class="">&#8595;</i></span>
        </button>
    </div>
    <div id="w0-dropdown" class="dropdown-menu">
        <div class="dropdown-content">
            <a class="dropdown-item" href="#">Dropdown item</a>
            <a class="dropdown-item" href="#">Other dropdown item</a>
            <a class="dropdown-item is-active" href="#">Active dropdown item</a>
            <a class="dropdown-item" href="#">Other dropdown item</a>
            <hr class="dropdown-divider">
            <a class="dropdown-item" href="#">With a divider</a>
            <hr class="dropdown-divider">
            <div class="dropdown">
                <div class="dropdown-trigger">
                    <button class="button" aria-haspopup="true" aria-controls="w1-dropdown">
                        <span>Sub-Dropdown</span>
                        <span class="icon is-small"><i class="">&#8595;</i></span>
                    </button>
                </div>
                <div id="w1-dropdown" class="dropdown-menu">
                    <div class="dropdown-content">
                        <h6 class="dropdown-header">Dropdown Options: </h6>
                        <hr class="dropdown-divider">
                        <a class="dropdown-item" href="/page1">Option 1</a>
                        <a class="dropdown-item" href="/page2">Option 2</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@vizuaalog/[email protected]/dist/dropdown.js"></script>

How to make the open/close of the second dropdown work?

Thks.

[VizuaaLOG]

Hey @terabytesoftw,

As far as I know Bulma does not support nested dropdowns like that and so BulmaJS will also not support it. If you're looking for that functionality then you would need to write custom code and/or a custom BulmaJS plugin.

This ticket, unless I'm mistaken, is around closing all other dropdowns on the page when another is opened.

[terabytesoftw]

If you could open the dropdowns individually, it will work, for now if you make a nested menu when opening the main one, it opens the second one automatically, I understand your point anyway, thank you very much for your attention.