Скрываем лишнее на 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 (минимизация строк)"