HTML
<?php if( have_rows('вопросы-ответы') ): ?>
<div class="faq" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/FAQPage">
<div class="container">
<div class="content-title"><?php the_field('заголовок_блока_вопросы-ответы'); ?></div>
<div class="faq_block">
<?php while( have_rows('вопросы-ответы') ): the_row(); ?>
<div class="faq--inner" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<div class="title">
<span itemprop="name"><?php the_sub_field('вопрос'); ?></span>
</div>
<div class="faq-text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="entrytext" itemprop="text"><?php the_sub_field('ответ'); ?></div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
<div class="faq">
<div class="container">
<div class="content-title">Частые вопросы наших клиентов</div>
<div class="faq-cont">
<div class="faq-item">
<div class="title-bold"></div>
<div class="entrytext">
<p></p>
</div>
</div>
</div>
</div>
</div>
jQuery
//вопрос ответ
(function(){
$(document).ready(function(){
$('.faq-item .title-bold').click(function(){
$(this).parent().children('.faq-item .entrytext').slideToggle();
$(this).toggleClass('active');
return false;
});
});
})();
//вопрос ответ
LESS
.faq{
background: @bg;
padding-top: 150px;
padding-bottom: 130px;
.faq_block{
padding-right: 500px;
background: url('../img/undraw_Up_to_date_re_nqid.svg') no-repeat right top;
background-size: auto 395px;
}
.faq--inner{
margin-bottom: 20px;
border-radius: 20px;
background: #fff;
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.08);
.title{
font-weight: bold;
background: #fff;
padding-top: 21px;
padding-bottom: 23px;
padding-left: 40px;
padding-right: 40px;
border-radius: 15px;
cursor: pointer;
position: relative;
@media (max-width: 750px){
font-size: 20px;
}
&::before{
content: '';
position: absolute;
right: 40px;
top: 19px;
width: 22px;
height: 22px;
border-radius: 50%;
background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") no-repeat 50% 58%;
transition: 0.3s all;
}
}
.active{
background: @color-1;
color: #fff;
&::before{
background: #fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 15l-6-6-6 6'/%3e%3c/svg%3e") no-repeat 50% 55%;
}
}
.faq-text{
padding: 40px;
padding-bottom: 30px;
background: url('../img/icon-btn.png') no-repeat 40px 38px;
display: none;
}
}
.btn-block{
margin-top: 40px;
}
}