CRM Руководитель - Форум

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

$html = '<button class="btn btn-primary" onclick="toggleDiv()">Панель фильтров</button><div id="myDiv" class="filters-panels horizontal-filters-panels">';

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

<script>
        // Функция для переключения видимости div блока
        function toggleDiv() {
            var div = document.getElementById("myDiv"); // Получаем элемент div по ID
            // Проверяем текущее состояние display
            if (div.style.display === "none") {
                div.style.display = "block"; // Показываем div
            } else {
                div.style.display = "none"; // Скрываем div
            }
        }
    </script>

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

/* Стили для скрытия/отображения фильтров */
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;
}

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

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