Streaming live at 10am (PST)

Checkbox inside a DropDown


Can i add Checkbox inside a drop down ?


Yes, a dropdown list being a DIV, you can add anything inside it.


how to have multiple dropdown ??
can you please show me.


from the Add menu, drag a dropdown, element in a navbar, for example. Then select it, and in the style tab click on open. Then you can drag another dropdown inside it. or a form with a checkbox, or a video, anything.


How can i get this type of dropdown with multiple checkbox selection??


Aaaaah a dropdown list, not a dropdown menu item. Sorry.

No, that will require custom code.


And how can i can custom code ? from where i can add custom code?


Possible... but difficult to do
- as it's not native Webflow.

Requires JS / JQuery (Custom Code)
and a Form Element...
(you have to add a Checkbox to an existing form element)
- which I've always had an issue with
-- because sometimes I simply need to add a checkbox
-- and manage it via JS/JQuery.

I'm curious though...
- does the Drop Down contain other values ?
- Normal Drop Downs would... but I don't know your specs.

I'm guessing the functionality you need (base solely on the image you provided):

Dropdown List would contain 2 values.
A: Analysis, Linear Algebra, Discrete Mathemetics
B: Introduction to Programming, Automata Theory, Complexity Theory

If the use selects A
- a SubList containing checkboxes for (Mathematics: Analysis, Linear Algebra, Discrete Mathematics)
- would display under it.

If the use selects B
- a SubList containing checkboxes for (Introduction to Programming, Automata Theory, Complexity Theory)
- would display under it.

If you were to modify your requirements to use a Tab element instead...
- you might see an easier route to follow and more likely keep your website as vanilla webflow.

ie: no custom code.


Is this "kinda what you are looking for" ?


@Revolution would you mind sharing the preview link for that option?



sure. here it is.


Hey Thanks for that Preview. Helped me alot.
Thank you very much.


Not a problem. Glad I could help.

I actually just modified the code.

In the previous example...
- positions of the group divs were initially set to absolute
- and they had a z-index of 1000 (to place them above the other elements)
- this makes it a pain in the rear to update / change the contained elements.

So... to make it easier
- I added code to programmatically change the position to absolute at run-time

(Using the Designer)... When you don't set the position... you also lose access to the z-index.

So... programmatically - I also needed to set the z-index
- but since all the groups are based on a class... I changed the class instead.

EDIT: There's also an interaction on each Group... which hides the group on mouseExit.
- this can be a little irritating as viewers may not always understand mouse movement
- and the data / info could "all-the-sudden-disappear".

It might be better to move the interaction to the parent container
- to allow more of buffer around each group
- or just a close option in the individual group container


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.