<style>
/*Активная кнопка стиль*/
.activebtn{
background-color: #ffffff;
color: #000000 !important;
}
/*Изменяем курсор для ссылок*/
[href = "#txtleft"] , [href = "#txtright"] , [href='#stepsleft2'] , [href='#stepsleft3'] , [href='#stepsleft4'] , [href='#stepsright6'] , [href='#stepsright7'] , [href='#stepsright8'] , [href='#myline'] {
cursor: context-menu;
}
/*Класс отменяющий прозрачность текста описания*/
.showtxt{
opacity:1 !important;
}
/*Анимация для текста описания*/
[href = "#txtleft"] , [href = "#txtright"] {
transition:all 0.6s cubic-bezier(0, 0, 0.8, 1.0);
}
</style>
<script>
$( document ).ready(function() {
//Прописываем ID Нашего Zero
var txtZeroID = "#rec166100305";
//Создаём переменные состояния
var open = false;
var close = true;
var resize = false;
//Сворачиваем всё
function allUp(){
//Поднимаем пункты
if (!resize){
$("[href='#stepsleft2']").closest(".tn-elem").animate({ top: '-=95' }, 1000); //Пункт 1
$("[href='#stepsleft3']").closest(".tn-elem").animate({ top: '-=198' }, 1000);//Пункт 2
$("[href='#stepsleft4']").closest(".tn-elem").animate({ top: '-=280'}, 1000);//Пункт 3
$("[href='#stepsright6']").closest(".tn-elem").animate({ top: '-=15' }, 1000); //Пункт 6
$("[href='#stepsright7']").closest(".tn-elem").animate({ top: '-=26'}, 1000); //Пункт 7
$("[href='#stepsright8']").closest(".tn-elem").animate({ top: '-=40'}, 1000); //Пункт 8
//Уменьшаем линию
$("[href='#myline']").closest(".tn-elem").animate({
height : '-=440', }, 1000, function() { });
} else {resize = false;};
//Уменьшаем высоту блока
$(""+txtZeroID+" .t396__artboard , "+txtZeroID+" .t396__carrier , "+txtZeroID+" .t396__filter").animate({ height : '-=430' }, 1000);
//Убираем вложенный текст 1-4
$('[href = "#txtleft"]').parent().removeClass("showtxt");
//Показываем вложенный текст 5-8
$('[href = "#txtright"]').parent().removeClass("showtxt");
//Меняем состояние
close = true;open = false;
};
//Разворачиваем всё
function allDown(){
$("[href='#stepsleft2']").closest(".tn-elem").animate({ top: '+=95' }, 1000); //Пункт 1
$("[href='#stepsleft3']").closest(".tn-elem").animate({ top: '+=198' }, 1000);//Пункт 2
$("[href='#stepsleft4']").closest(".tn-elem").animate({ top: '+=280' }, 1000);//Пункт 3
$("[href='#stepsright6']").closest(".tn-elem").animate({ top: '+=15' }, 1000);//Пункт 6
$("[href='#stepsright7']").closest(".tn-elem").animate({ top: '+=26' }, 1000);//Пункт 7
$("[href='#stepsright8']").closest(".tn-elem").animate({ top: '+=40' }, 1000); //Пункт 8
//Увеличиваем линию
$("[href='#myline']").closest(".tn-elem").animate({ height : '+=440' }, 1000);
//Увеличиваем высоту блока
$(""+txtZeroID+" .t396__artboard , "+txtZeroID+" .t396__carrier , "+txtZeroID+" .t396__filter").animate({height : '+=430'}, 1000);
//Показываем вложенный текст 1-4
$('[href = "#txtleft"]').parent().addClass("showtxt");
//Показываем вложенный текст 5-8
$('[href = "#txtright"]').parent().addClass("showtxt");
//Меняем состояние
open = true;close = false;
};
//Добавляем класс активной кнопки к кнопке КОРОТКО
$('[href = "#short"]').addClass('activebtn');
//Управляем активностью кнопок
//При клике на КОРОТКО
$('[href = "#short"]').click(function (){
$(this).addClass('activebtn');
$('[href = "#long"]').removeClass('activebtn');
//Поднимаем пункты
if (open){ allUp()}; return false; });
//При клике на ПОДРОБНО
$('[href = "#long"]').click(function (){
$(this).addClass('activebtn');
$('[href = "#short"]').removeClass('activebtn');
//Показываем пункты
if (close){ allDown()};return false; });
//При изменении размеров окна
var resizeTimeout;
$(window).resize(function(){
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function(){
if (!close){ //Сворачиваем пункты
resize = true;
setTimeout(function() {
$("[href = '#short']")[0].click();
}, 500); }; }, 500);});
});
</script>