+7 982 100 5 999

Вопросы-ответы

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; ?>

jQuery

//вопрос ответ
(function(){
    $(document).ready(function(){
        $('.faq--inner .title').click(function(){
            $(this).parent().children('.faq--inner .faq-text').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;
    }
}