Сворачивание панели фильтров

[nruslan2]

я к тому что js скрипты можно сразу в системе прописывать,а не скрипты делать!
Но у скриптов есть один плюс - возможность отключать и не думать где js был прописан)

[pantale0n]

Добрый день!
На сущностях работает отлично, а в канбан отчете начинает работать только после shift+f5, можете пояснить что нужно изменить , чтобы в отчете канбан также срабатывало сворачивание?

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

CSS

Код: Выделить всё

/* Стили для скрытия/отображения фильтров */
ul[class*="list-inline filters-panels"] {
    transition: max-height 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    max-height: 500px; /* Установить максимальную высоту для видимых фильтров */
}

ul[class*="list-inline filters-panels"].collapsed {
    max-height: 0;
    padding: 0;
    margin: 0;
}

/* Стили кнопки "Панель фильтров" */
#toggle-all-filters {
    background-color: #337ab7;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 20px; /* Увеличено значение для более закругленных углов */
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}

JS

Код: Выделить всё

<script>
document.addEventListener("DOMContentLoaded", function () {
    const filterGroups = document.querySelectorAll('ul[class*="list-inline filters-panels"]');

    if (filterGroups.length > 0) {
        const filtersContainer = filterGroups[0].parentNode;

        // Создаем кнопку
        const button = document.createElement("button");
        button.id = "toggle-all-filters";
        button.textContent = "Панель фильтров";

        // Вставляем кнопку перед первым фильтром
        filtersContainer.insertBefore(button, filterGroups[0]);

        // Проверка состояния сворачивания из localStorage
        const collapsedState = localStorage.getItem('filtersCollapsed');
        if (collapsedState === 'true') {
            filterGroups.forEach(group => group.classList.add("collapsed"));
        } else {
            filterGroups.forEach(group => group.classList.remove("collapsed"));
        }

        // Обработчик для кнопки
        button.addEventListener("click", function () {
            const isCollapsed = [...filterGroups].every(group => group.classList.contains("collapsed"));

            filterGroups.forEach(group => {
                group.classList.toggle("collapsed", !isCollapsed);
            });

            // Сохраняем текущее состояние в localStorage
            localStorage.setItem('filtersCollapsed', !isCollapsed);
        });
    }
});
</script>