Dropdown list on Wix
- Jan 15, 2022
- 1 min read
Today we’re going to look at how to create a dropdown list on Wix using code. This feature is especially useful for websites with a large amount of information. A page with collapsible subitems always looks more organized and visually balanced.
View Example >
Example description of the dropdown list
This example shows how to integrate a collapsible list into your website. Elements on the page open menu sections when the user clicks one of the arrows. The items of each menu section are placed inside a box.
Note that opening or closing the box affects all the elements inside it, so we don’t need to expand or collapse each item individually.
Code for the dropdown list
Copy the code to create your own list.
function toggleFold(index) {
let $fold = $w('#fold' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowRight = $w('#arrowRight' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
} else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1, 2, 3, 4]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}
export function headerBox1_onClick(event) {
toggleFold(1);
}
export function headerBox2_onClick(event) {
toggleFold(2);
}
export function headerBox3_onClick(event) {
toggleFold(3);
}
export function headerBox4_onClick(event) {
toggleFold(4);
}
