<script>
$(document).ready(function(){
let tx16n = $('div[data-record-type="585"]');
tx16n.find('.t-container').wrapInner('<div class="left_side"></div>').append('<div class="right_side">');
tx16n.find('.t-container').wrapInner('<div class="wrapper_side"></div>');
let contentLink = 'https://mo-ti.ru/static-form'
let contentBlock = 'div[data-record-type="812"]';
function initBlock(){
setTimeout(function(){
let idBlk = $('.right_side .t-rec').attr('id');
//t431_init(idBlk.replace(/[^0-9]/g, ''));
}, 200);
};
$('.right_side').load(contentLink+' '+contentBlock+':first');
initBlock();
$('.left_side .t585__text li:first').addClass('active-li');
$(document).on('click','.left_side .t585__content li',function(e){
if( !$(this).hasClass('active-li')){
$('.left_side .t585__content li').removeClass('active-li');
$(this).addClass('active-li');
let cont = $(this).closest('.left_side');
let indexLi = $('.left_side li').index( $(this) );
$('.right_side').load(contentLink+' '+contentBlock+':eq('+indexLi+')');
initBlock();
if($(window).width()<620){
let top = $('.right_side').offset().top-20;
$('html, body').animate({scrollTop: top}, 600);
};
};
});
});
</script>
<style>
.left_side {width: 30%}
.right_side {
width: 70%;
padding-left: 50px;
padding-right: 20px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
.hide_side{opacity:0}
.wrapper_side { display: flex}
.wrapper_side .t-col {
margin: 0;
max-width: none;
}
.t812__pricelist-item+.t812__pricelist-item { margin-top: 15px}
.right_side .t-section__bottomwrapper { margin-top: 35px}
.right_side .t-section__title { margin-bottom: 15px}
.right_side .t-section__topwrapper {margin-bottom: 40px}
.right_side .t-section__bottomwrapper {margin-top: 35px}
.left_side .t585__textwrapper {padding: 0}
.t585__opened .t585__lines {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.t585__lines svg {
display: none;
}
.t585__lines::after {
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
background-image: url(https://static.tildacdn.com/lib/tildaicon/35656264-3035-4838-b266-623530623135/Layer_26.svg);
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
}
.left_side .t-col:hover .t585__title { text-decoration: underline}
.left_side .t-col .t585__title {transition: all 0.3s ease-in-out}
.left_side .t585__opened .t585__title {text-decoration: underline}
.left_side .t585__text {margin-bottom: 10px}
.left_side .t585__text li {
list-style-type: none;
cursor: pointer;
position: relative;
padding-top: 6px;
padding-bottom: 4px;
transition: all 0.3s ease-in-out;
}
li.active-li,
.left_side .t585__text li:hover { padding-left: 20px}
.left_side .t585__text li:before {
content: "";
width: 0px;
height: 1px;
background-color: #000;
position: absolute;
top: 50%;
left: 0;
transition: all 0.3s ease-in-out;
}
.left_side .t585__text li.active-li:before,
.left_side .t585__text li:hover:before{ width: 15px}
@media screen and (max-width:940px){
.left_side {width: 40%}
.right_side {width: 60%}
}
@media screen and (max-width:640px){
.wrapper_side {
display: block;
}
.left_side{
margin-bottom:50px;
width: 100%;
}
.right_side {
width: 100%;
padding-left: 0px;
padding-right: 0px;
}
}
</style>