Creating a Table with dropdown list option

Ask the community
,
1

Hi I am trying to create a dropdown menu within a page similar to the following, in theory I would also like to include a photo, but this is not 100% required. I am trying to work out how to do this but can’t find an elegant way to do it.

Thanks!

Alex

2

So use an arrow shape, and on click show() the hidden box.

3

I am not sure I fully understand. I would like to create something similar to above. How would I start creating this?

4

@alexandersmith3 You should build it by adding a box, make it collapsed, the open it on click, in this box put the other elements you need like checkbox elements, drop downs. time pickers etc… and filter by the selected values.

See:
https://www.wix.com/corvid/reference/$w/collapsedmixin/collapse
https://www.wix.com/corvid/reference/$w/collapsedmixin/expand
https://www.wix.com/corvid/reference/$w/checkbox
https://www.wix.com/corvid/reference/$w/dropdown
https://www.wix.com/corvid/reference/wix-search/filter

5

@jonatandor35 Thanks for the response but this seems a little out of my depth. Are there coders who I can pay to do this for me or at least the setup? Thanks again

6

Is this what you want to create?

900×642 45.7 KB

7

@russian-dima yes exactly that maybe adding a photo but that I know will be easy to do…

8

@alexandersmith3
This here is the only way i know, how to do it…

https://russian-dima.wixsite.com/meinewebsite/dynamic-list

$w.onReady(function () {
    $w('#ICON1a').onClick(async(event) => {$w('#STRIP2').expand(), $w('#ICON1a').hide(), $w('#ICON1b').show()})
    $w('#ICON2a').onClick(async(event) => {$w('#STRIP4').expand(), $w('#ICON2a').hide(), $w('#ICON2b').show()})
    $w('#ICON3a').onClick(async(event) => {$w('#STRIP6').expand(), $w('#ICON3a').hide(), $w('#ICON3b').show()})
})
9

Hi this looks good and I can change colours etc. how do I implement this into the page? When I copy it comes up with errors. Sorry for the basic question

10

Thanks! When I go to copy this to the page it just comes up with errors, is there a way on how to copy this to a certain section?

11

You have to create all that STRIPES which are used in the code.
And also use the same amount of IMAGES/ICONS which are used in the code.

At least you should have 3x ICON / IMAGE and 3x STRIPES.

Also take attention on the IDs of the ICONS and STRIPES.

Either you rename the IDs in the CODE, or you rename the IDs of ICONS and STRIPES on your page.

Of course this was just a simple example/idea how to do it.
Another possibility would be to do that with the help of repeater, but this would need advanced CODING-SKILLs to achieve it.