(function ($) {
$(document).ready(function () {
$('.accordeon-label').each(function () {
if ($(this).hasClass('opened')) {
$('.accordeon-content', this).show();
}
});
});
$('.accordeon-label').on('click', function () {
$(this).toggleClass('opened');
$('.accordeon-content', this).toggle(300);
if ($(this).hasClass('opened')) {
$(this).siblings().removeClass('opened');
$(this).siblings().children('.accordeon-content').hide(300);
}
});
})(jQuery);
.blockFaq .accorderon-box {
border-top: 1px solid #222222;
margin-top: 50px;
}
.blockFaq .accordeon-label {
font-size: 24px;
line-height: 34px;
color: black;
border-bottom: 1px solid #222222;
padding: 35px 0;
cursor: pointer;
position: relative;
box-sizing: border-box;
}
.blockFaq .accordeon-label.opened span.crest {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.blockFaq .accordeon-label:before,
.blockFaq .accordeon-label:after {
content: none;
}
.blockFaq .accordeon-label span {
position: absolute;
top: 23px;
right: 0;
width: 58px;
height: 58px;
display: block;
}
.blockFaq .accordeon-label span.crest {
z-index: 20;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.blockFaq .accordeon-label span.crest:before,
.blockFaq .accordeon-label span.crest:after {
content: "";
display: block;
width: 42px;
height: 2px;
background: #fff;
position: absolute;
top: 28px;
right: 8px;
}
.blockFaq .accordeon-label span.crest:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.blockFaq .accordeon-label span.crest-bg {
background: #9C4592;
border-radius: 50%;
z-index: 10;
}
.blockFaq .accordeon-label .accordeon-content {
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
margin-left: 0;
margin-top: 38px;
line-height: 23px;
}
.accorderon-box .accordeon-label .accordeon-content {
display: none;
color: initial;
font-weight: initial;
font-size: 16px;
padding: 10px;
-webkit-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.4);
box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.4);
width: 100% !important;
border-radius: 7px;
box-sizing: border-box;
}
.accorderon-box .accordeon-label .accordeon-content p {
margin: 0 0 10px;
}
<div class="blockFaq">
<div class="accorderon-box">
<div class="accordeon-label opened">Что такое «Облачное хранение»?<span class="crest"></span><span class="crest-bg"></span>
<div class="accordeon-content">
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
</div>
</div>
<div class="accordeon-label">Упаковочные материалы и демонтаж мебели<span class="crest"></span><span class="crest-bg"></span>
<div class="accordeon-content">
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
<p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </p>
<p>Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
</div>
</div>
<div class="accordeon-label">Тарифы и условия доставки<span class="crest"></span><span class="crest-bg"></span>
<div class="accordeon-content">
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
<p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </p>
</div>
</div>
<div class="accordeon-label">Какую мебель можно хранить на складе?<span class="crest"></span><span class="crest-bg"></span>
<div class="accordeon-content">
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
<p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>