Рыцарский орден
Вы рыцари решившие вступить в тайный орден и обеспечить себе безбедную жизнь, вступают единицы, не потеряйте друзей в опасных испытаниях, замка 12-ого века.-
Психбольница
Вы попадаете в психбольницу, где врачи ставят опыты над пациентами. Выбирайтесь или станьте частью эксперимента, для начала выберетесь из смирительных рубашек. А вы тут не одни..
Маньяк
Вы с компанией друзей просыпаетесь в странном месте – вы в цепях и наручниках, комнат много. Маньяк уже близко и он не один, выбирайтесь и бегите!
<style>
/*Серый цвет для иконок*/
.tabmenu div[data-elem-type="image"] .tn-atom {
   filter: grayscale(1);
   opacity:0.5;
}
/*Плавность анимации для Shape*/
.tabmenu div[data-elem-type="shape"] {
    transition: all 0.3s ease-in-out;
}
/*Класс активной иконки*/
.activeicon, .hovericon{
    opacity:1!important;
    filter: grayscale(0) !important;
}
/*Класс активного Shape*/
.activeshape, .hovershape{
     margin-top: -20px;
}
</style>

<script>
$(document).ready(function() {
    //Прописываем класс к нашему таб-меню
    $('#rec145386994').addClass('tabmenu');
    //Прописываем наши скрытые блоки
     var hideblock = ["#rec145389813","#rec145390123","#rec145390302"];
    //Добавляем классы к нашим скрытым блокам
     $(hideblock[0]).addClass('tabcontent');var i = 0; var number = 0;
     for(let i = 1; i < hideblock.length; i++){
     $(hideblock[i]).addClass('tabcontent t400__off');};  
  
    //Эффект при наведении на вкладку
     $('.tabmenu div[data-elem-type="button"]').hover(function(){ 
      number = $('.tabmenu div[data-elem-type="button"]').index(this);     
      $('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').addClass('hovericon');
      $('.tabmenu div[data-elem-type="shape"]:eq('+number+')').addClass('hovershape');     
	  }, function(){ 
	  $('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').removeClass('hovericon');
      $('.tabmenu div[data-elem-type="shape"]:eq('+number+')').removeClass('hovershape');
	  });
    //Добавляем активную вкладку при загрузке страницы
        $('.tabmenu div[data-elem-type="image"]:first .tn-atom').addClass('activeicon');
        $('.tabmenu div[data-elem-type="shape"]:first').addClass('activeshape');
    //При нажатии на вкладку
    $('.tabmenu div[data-elem-type="button"]').click(function(e) {e.preventDefault();
        //Вычисляем номер нашего таба         
        number = $('.tabmenu div[data-elem-type="button"]').index(this);
       //Удаляем классы акивного состаяния
        $('.tabmenu div[data-elem-type="image"] .tn-atom').removeClass('activeicon');
        $('.tabmenu div[data-elem-type="shape"]').removeClass('activeshape');
       //Делаем активным данную вкладку
        $('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').addClass('activeicon');
        $('.tabmenu div[data-elem-type="shape"]:eq('+number+')').addClass('activeshape');
       //Добавляем класс скрытия для контентных блоков
       $('.tabcontent').addClass('t400__off'); 
       //ПОказываем нужный контентый блок
       $(hideblock[number]).removeClass('t400__off');
});
});
</script>
<style>
    .activebtn {
    text-decoration: underline !important;
}
</style>

<script>
$(document).ready(function(){

//0 кнопка - Все блоки
$('#rec145391273').addClass('blk0 lira').hide();
//1- кнопка
$('#rec145392076').addClass('blk1 lira').hide();
//2-кнопка
$('#rec145392368').addClass('blk2 lira').hide();

//Класс для кнопок перекючения
$('a[href = "#collection"]').addClass('triggerbtn');
$('.triggerbtn:first').addClass('activebtn');


//При нажатии на кнопку смены квеста
 $('a[href="#kvestchange"]').click(function(e) {e.preventDefault();
$('.lira').slideUp(400);
});


//При нажатии на кнопку переключения
 $('.triggerbtn').click(function(e) {e.preventDefault();
    var btnindex = $(".triggerbtn").index(this); 
 	if(!$(this).hasClass("activebtn")) {
 	     $('.triggerbtn').removeClass('activebtn'); $(this).addClass('activebtn');
         $('.lira').slideUp(400);
         $('.blk'+btnindex+'').slideToggle(400);
 	    
 	}else{
 	    $('.blk'+btnindex+'').slideToggle(400);
 	    
 	};
     
 });

});
</script>
Made on
Tilda