Dropdown Toggle Button + Dynamic Attribute (Class Toggle)

[Ari]

I’ve created new page and added container and dropdown.
Wanted to check if class toggle works but Data Bindings windows is empty.

When I added a regular button it shows on the data bindings list but then it do not work as dropdown toggle button. As soon as I add “dropdown-toggle” class to the regular button it vanishes form the Data Bindings list.

How to make a

to appear on Data Bindings list ? what are to rules ? what lands on the list and what not ?
or
how to make class toggle when dropdown is open ?

[Teodor]

Can you explain in details what are you trying to achieve?

[Ari]

I’ve created a simple menu (dynamic collapse) with a language button that I would like to behave as dropdown ( second dynamic collapse).

When I click to expand dropdown two things happen:

1. Arrow icon changes to an X icon ( I’ve achieved it with class toggle attached to the state of dynamic collapse )
   (collapse3.collapsed != 1)
2. shows other languages ( the second dynamic collapse)
   

The problem right now is that user must choose the language or click the X to collapse the options.

If someone clicks the blue menu button without doing so the second collapse stays visible.

It would be perfect if
(1) a mouse click on anything other that two visible language options (nested inside dynamic collapse) would close it (like it works with BS5 Dropdown)
(2) clicking the blue menu button closes first and second collapse but opens only the first one

The walk-around I’ve envisioned is to create a BS5 Dropdown instead of second collapse and style it with CSS which I’ve managed somehow (many, many containers…).

but I can’t find Dropdown in Data Bindings list so I can’t add Class Toggle hence me previous post seeking help.

Hope that explanation helps.

Finally the code:

menu ( first dynamic collapse):

     <div class="collapse" id="collapse1" is="dmx-bs5-collapse">

        <div class="container-fluid style90 pt-1 ps-1 pe-1">
            <div class="list-group style94">




                <a href="tel:502010836" class="list-group-item list-group-item-action style98" data-bs-target="#collapse2" id="">
                    <div class="d-flex w-25 justify-content-center align-items-center flex-column">
                        <i class="fas fa-mobile-alt fa-2x"></i>
                    </div>
                    <div class="d-flex w-50">
                        <p class="mb-0">502 010 836</p>
                    </div>
                    <div class="d-flex justify-content-between">
                        <p class="mb-0"></p>
                    </div>
                </a>

                <a href="tel:502010836" class="list-group-item list-group-item-action style98" data-bs-target="#collapse2" id="">
                    <div class="d-flex w-25 justify-content-center align-items-center flex-column">
                        <i class="fas fa-mobile-alt fa-2x"></i>
                    </div>
                    <div class="d-flex w-50">
                        <p class="mb-0">502 010 836</p>
                    </div>
                    <div class="d-flex justify-content-between">
                        <p class="mb-0"></p>
                    </div>
                </a>

                <a href="#" class="list-group-item list-group-item-action" data-bs-toggle="collapse" data-bs-target="#collapse3" id="flagidropdown1">



                    <div class="d-flex flex-row align-items-center" id="polskidrop">

                        <div class="d-flex w-25 justify-content-center">
                            <img src="assets/images/pl.svg" width="32" height="32">
                        </div>
                        <div class="d-flex w-50 align-items-stretch flex-column">
                            <p class="mb-0">polski</p>
                        </div>
                        <div class="btn d-flex flex-row justify-content-center align-items-end w-25" id="flagi">
                            <i class="fas fa-angle-double-down" dmx-class:fa-times="(collapse3.collapsed != 1)"></i>
                            <p></p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

language menu (second collapse)

     <div class="collapse ps-1" id="collapse3" is="dmx-bs5-collapse">
        <div class="container style90 ms-0 me-0 ps-0 pe-0">
            <div class="list-group style94">
                <a href="tel:502010836" class="list-group-item list-group-item-action style98" data-bs-target="#collapse3" id="" data-bs-toggle="collapse">
                    <div class="d-flex flex-row align-items-center w-100">
                        <div class="d-flex w-25 justify-content-center">
                            <img src="assets/images/gb.svg" width="32" height="32">
                        </div>
                        <div class="d-flex w-50 align-items-stretch flex-column">
                            <p class="mb-0">english</p>
                        </div>
                        <div class="d-flex w-25 justify-content-center">
                            <p class="mb-0"></p>
                            <i class="fas fa-angle-double-left"></i>
                        </div>

                    </div>

                </a>
                <a href="tel:502010836" class="list-group-item list-group-item-action style98" data-bs-target="#collapse3" id="" data-bs-toggle="collapse">
                    <div class="d-flex flex-row align-items-center w-100">
                        <div class="d-flex w-25 justify-content-center">
                            <img src="assets/images/de.svg" width="32" height="32">
                        </div>
                        <div class="d-flex w-50 align-items-stretch flex-column">
                            <p class="mb-0">deutch</p>
                        </div>
                        <div class="d-flex w-25 justify-content-center">
                            <p class="mb-0"></p>
                            <i class="fas fa-angle-double-left"></i>
                        </div>

                    </div>
                </a>
            </div>
        </div>
    </div>

custom dropdown:

     <div class="collapse ps-1" id="collapse3" is="dmx-bs5-collapse">
        <div class="container style90 ms-0 me-0 ps-0 pe-0">
            <div class="list-group style94">
                <a href="tel:502010836" class="list-group-item list-group-item-action style98" data-bs-target="#collapse3" id="" data-bs-toggle="collapse">
                    <div class="d-flex flex-row align-items-center w-100">
                        <div class="d-flex w-25 justify-content-center">
                            <img src="assets/images/gb.svg" width="32" height="32">
                        </div>
                        <div class="d-flex w-50 align-items-stretch flex-column">
                            <p class="mb-0">english</p>
                        </div>
                        <div class="d-flex w-25 justify-content-center">
                            <p class="mb-0"></p>
                            <i class="fas fa-angle-double-left"></i>
                        </div>

                    </div>

                </a>
                <a href="tel:502010836" class="list-group-item list-group-item-action style98" data-bs-target="#collapse3" id="" data-bs-toggle="collapse">
                    <div class="d-flex flex-row align-items-center w-100">
                        <div class="d-flex w-25 justify-content-center">
                            <img src="assets/images/de.svg" width="32" height="32">
                        </div>
                        <div class="d-flex w-50 align-items-stretch flex-column">
                            <p class="mb-0">deutch</p>
                        </div>
                        <div class="d-flex w-25 justify-content-center">
                            <p class="mb-0"></p>
                            <i class="fas fa-angle-double-left"></i>
                        </div>

                    </div>
                </a>
            </div>
        </div>
    </div>

[Teodor]

Sorry, but I don’t really get your idea here.
I am also a bit confused about the 3 code samples you posted … what should i check there / which code example of the 3 you posted exactly?
What is your final goal here? To have a dropdown inside a collapse - i just can’t get your idea?

Do you wish your blue button to open a dropdown and this dropdown to open another dropdown? Or is it something else you are trying to achieve?
Do you maybe have a live example of what you need?

[Sorry_Duh]

What I’m getting from this is you want a dropdown like menu but you have built it using the collapse components, you have then nested a collapse inside so you have two collapses for a nested menu.

Then you want to close these two collapses when the user clicks away from the collapses, kind of like how a modal works or a offcanvas?