Скрываем лишнее на jQuery (минимизация строк)

Admin JavaScript

Скрываем (минимизируем) строки с помощью jQuery.

Подобная реализация есть JS – минимизация на JavaScript.

Код работает следующим образом. На всех блоках навешен класс скрывающий их. При нажатии на один из блоков, скрывающий их класс — удаляется. Если снова нажать, то он снова добавляется.

Весь код для минимизации:

jQuery('menu').find('.block').each(function (el) {

    var line  = el.children('.lines'),
        title = el.children(".title");
   
    // Основная конструкция для минимизации
    title.on('click', function(){
        if (line.hasClass('hidden')) {
            line.removeClass("hidden");
            title.children(".arrow-down").removeClass("arrow-down").addClass('arrow-up');
        } else {
            line.addClass("hidden");
            title.children(".arrow-up").removeClass("arrow-up").addClass('arrow-down');
        }
    });
   
    // Автоматически скрываем на мобильном варианте и показываем на десктопе
    jQuery('.button').on('click', function(){
        if(jQuery(window).width() > 500) {
            title.children(".arrow-down").removeClass("arrow-down").addClass('arrow-up');
            line.removeClass("hidden");
        } else {
            line.addClass("hidden");
        }
    });
   
});
Метки:

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Скрываем лишнее на jQuery (минимизация строк)"