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

Скрываем (минимизируем) строки с помощью 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 (минимизация строк)".

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вам нужно добавить участок кода ставьте его между тегами <code></code>