Checkbox inside a DropDown

Design help General
1

Can i add Checkbox inside a drop down ?

2

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

3

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

4

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.

5

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

6

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

No, that will require custom code.

7

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

8

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
and
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.

9

Is this “kinda what you are looking for” ?

http://group-check-box-drop-down.webflow.io/

1 Like
10

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

Cheers,

11

sure. here it is.

https://preview.webflow.com/preview/group-check-box-drop-down?preview=198959d28b360afa970a1441ab1e9883

1 Like
12

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

13

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
14

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