What do Button Action Toggles mean

Wappler General Need Help
1

In the Button properties i see something called Action Toggle which is a dropdown list having the following options

None
Button
Dropdown
Collapse
Tab
List
Modal
Offcanvas

What do these mean / do ? Can someone point me to documentation about these options

Thanks

2

These are options to control/toggle different components on your page.
So if you add a modal on your page, then add a button, selecting the Action Toggle > Modal and then selecting your modal id, this button will show the modal.
This works the same for the rest of the components you see in this dropdown.

1 Like
3

Sorry i’m not able to select ID

I added a dropdown to my page
In Button 1 Action Toggle i selected Dropdown but it is not asking which dropdown to toggle
and on clicking button dropdown is still visible

4

Did you add a dropdown menu or a drodpown button?

5

image
image443×1069 30.3 KB

6

The dropdowns in bootstrap require a specific markup. You need to wrap the button and the dropdown in an element with a class of .drodpown for it to work.
Example:

<div class="dropdown">
  <button id="dropdown1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

so the button having action toggle - dropdown must be in the .dropdown element together with the dropdown menu.

Learn more here:

1 Like
7

Oh probably too advanced for me at the moment. I don’t mind javascript but would rather not touch this markup. Thanks