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