<script>
document.addEventListener("DOMContentLoaded", function() {
(function () {
const accordBlock = document.querySelector('.uc-accord-desc');
if(accordBlock!=null){
const accordHeaderContent = `
<div class="accord-header-col1"></div>
<div class="accord-header-col2">КОМПЛЕКТАЦИЯ 1<br>Start</div>
<div class="accord-header-col3">КОМПЛЕКТАЦИЯ 2<br>Medium</div>
<div class="accord-header-col4">КОМПЛЕКТАЦИЯ 3<br>Maximum</div>
`;
const accordHeader = document.createElement("div");
accordHeader.className = "accord-header t-text";
accordHeader.innerHTML = accordHeaderContent;
const accordFooterContent = `
<div class="accord-footer-col1"></div>
<div class="accord-footer-col2"><a href="#link-1">Выбрать</a></div>
<div class="accord-footer-col3"><a href="#link-2">Выбрать</a></div>
<div class="accord-footer-col4"><a href="#link-3">Выбрать</a></div>
`;
const accordFooter = document.createElement("div");
accordFooter.className = "accord-footer t-text";
accordFooter.innerHTML = accordFooterContent;
accordBlock.querySelector('.t-container').firstElementChild.prepend(accordHeader);
accordBlock.querySelector('.t-container').lastElementChild.append(accordFooter);
const boxWrapper = `
<div class="accord-box-col"></div>
<div class="accord-box-col"></div>
<div class="accord-box-col"></div>
`;
const headers = document.querySelectorAll('.uc-accord-desc .t585__header');
for(let i=0; i<headers.length; i++){
headers[i].insertAdjacentHTML('beforeend', boxWrapper);
};
setTimeout(function() {
const accordText = document.querySelectorAll('.uc-accord-desc .t585__text');
for(let i=0; i<accordText.length; i++){
let text = accordText[i].lastElementChild.textContent;
if(text!=''){
if(text.indexOf("##") >= 0){
text = text.replace('##', '');
text = text.split('-');
for(let j=0; j<text.length; j++){
if(text[j]=='0'){
accordText[i].closest('.t585__wrapper').querySelectorAll('.accord-box-col')[j].classList.add('cross');
};
if(text[j]=='1'){
accordText[i].closest('.t585__wrapper').querySelectorAll('.accord-box-col')[j].classList.add('check');
};
};
};
};
};
}, 500);
};
})();
});
</script>
<style>
.accord-box-col.check {
background-image: url(https://static.tildacdn.com/tild6465-3632-4764-a465-616162373038/photo_1.svg);
}
.accord-box-col.cross {
background-image: url(https://static.tildacdn.com/tild3230-3063-4133-b231-313831643664/Group_1_8_1.svg);
}
.uc-accord-desc span.t585__lines {
background-image: url(https://static.tildacdn.com/tild3430-3164-4461-b465-663633356130/downarrow_121316.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.uc-accord-desc span.t585__lines svg {
opacity:0;
}
.uc-accord-desc .t585__opened .t585__lines {
z-index: 1;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.uc-accord-desc button.t585__trigger-button {
padding: 20px 50px 20px 50px;
}
.uc-accord-desc span.t585__icon {
right: auto;
left: 0;
}
.uc-accord-desc .t585__content {
padding-left: 50px;
box-sizing: border-box;
max-width: 660px;
}
.accord-header {
font-weight: 600;
}
.accord-header,
.accord-footer,
.uc-accord-desc .t585__header{
display: grid;
grid-template-columns: 660px 1fr 1fr 1fr;
font-size: 12px;
font-weight: 400;
grid-gap: 22px;
}
.accord-header,
.accord-footer{
margin-bottom: 10px;
}
.accord-header>div,
.accord-footer>div
{
text-align: center;
}
.uc-accord-desc .t585__text em {
display: none;
}
.accord-box-col {
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
}
.uc-accord-desc span.t585__lines {
background-image: url(https://static.tildacdn.com/tild3430-3164-4461-b465-663633356130/downarrow_121316.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.uc-accord-desc span.t585__lines svg {
opacity:0;
}
.uc-accord-desc .t585__opened .t585__lines {
z-index: 1;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.uc-accord-desc button.t585__trigger-button {
padding: 20px 50px 20px 50px;
}
.uc-accord-desc span.t585__icon {
right: auto;
left: 0;
}
.uc-accord-desc .t585__content {
padding-left: 50px;
}
.uc-accord-desc .t585 {
overflow: auto;
}
.accord-header {
font-weight: 600;
}
#allrecords .accord-footer a {
color: #fcb42f;
border: 1px solid #fcb42f;
padding: 10px 15px;
display: inline-block;
margin-top: 15px;
border-radius: 5px;
font-size: 16px;
transition: all 0.2s ease-in-out;
}
#allrecords .accord-footer a:hover {
color: #fff;
border: 1px solid #fcb42f;
background-color:#fcb42f;
}
@media screen and (max-width: 1200px) {
.uc-accord-desc .t-container {
max-width: 960px;
width: 960px;
}
.accord-header,
.accord-footer,
.uc-accord-desc .t585__header {
display: grid;
grid-template-columns: 500px 1fr 1fr 1fr;
font-size: 11px;
font-weight: 300;
grid-gap: 5px;
}
.uc-accord-desc .t585__content{
max-width: 500px;
}
}
@media screen and (max-width: 960px) {
.accord-header,
.accord-footer,
.uc-accord-desc .t585__header {
grid-template-columns: 370px 1fr 1fr 1fr;
}
.uc-accord-desc .t585__content {
max-width: 370px;
}
.uc-accord-desc .t-container {
max-width: 760px;
width: 760px;
}
}
@media screen and (max-width: 540px) {
.accord-header,
.accord-footer,
.uc-accord-desc .t585__header {
grid-template-columns: 300px 1fr 1fr 1fr;
}
.uc-accord-desc .t585__content {
max-width: 300px;
}
.uc-accord-desc .t-container {
max-width: 650px;
width: 650px;
}
.uc-accord-desc button.t585__trigger-button {
padding: 20px 10px 20px 40px;
}
.uc-accord-desc .t585__icon {
width: 14px;
height: 14px;
}
.uc-accord-desc .t585__content {
padding-left: 40px;
}
.uc-accord-desc .t585__circle {
width: 30px;
height: 30px;
}
.accord-box-col {
background-size: 20px;
}
}
</style>