Выпадающий список на wix

Сегодня мы с вами разберем, как сделать выпадающий список на Wix с помощью кода. Функция актуальна для сайтов с большим количеством информации. Страница со сворачивающимися подпунктами всегда выглядит более гармонично.

Посмотреть Пример >

В этом примере показано, как интегрировать сворачиваемый список на ваш сайт. Элементы на странице открывают разделы меню, когда пользователь нажимает на одну из стрелок. Элементы каждого пункта меню помещены в бокс.

Обратите внимание, что открытие или закрытие блока влияет на все элементы внутри бокса, поэтому нам не нужно разворачивать или сворачивать каждый по отдельности.

Скопируйте код, для создание собственного списка

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);

}