Как сделать аккордеон на странице

Question

Как сделать аккордеон на странице

26 января 2018

1

Добрый вечер! В picco shop была реализована страница вопрос ответ, можно ли в этой теме сделать такую же страницу? И как это сделать? Заранее спасибо

3 ответа

Владимир Сергеев

Разработчик

Решение

26 сентября 2017 19:58

1

Тогда такой код:

 <div class="acco margin-bottom40 hide_siblings">
    <!-- Первая секция -->
    <div class="acco_section border-bottom">
        <!-- Активная секция имеет класс active-->
        <div class="a_head active">
            <!-- Заголовок секции -->
            <div class="h4 heading padding-bottom10 toggle">
                Активная секция
            </div>
            <!-- Конец заголовка секции -->
        </div>
        <!-- Активная секция имеет класс active-->
        <div class="a_body margin-bottom10 active">
    		Текст активной секции
    	</div>
    </div>
    <!-- Конец первой секции -->
    
    <!-- Вторая секция -->
    <div class="acco_section border-bottom">
        <div class="a_head">
            <!-- Заголовок секции -->
            <div class="h4 heading padding-bottom10 toggle">
                Вторая секция
            </div>
            <!-- Конец заголовка секции -->
        </div>
        <div class="a_body margin-bottom10">
    		Текст второй секции
    	</div>
    </div>
    <!-- Конец первой секции -->
</div>

Но там не рамка, а граница.
В рамку не предусмотрены стили в теме.

ответить

Добавить ответ

Владимир Сергеев · Answer 1

Вставьте этот код на в страницу в режиме редактора HTML:

 <div class="acco margin-bottom40 hide_siblings">


    <!-- Первая секция -->
    <div class="acco_section">
        <!-- Активная секция имеет класс active-->
        <div class="a_head active">
            <!-- Заголовок секции -->
            <div class="h4 heading toggle">
                Активная секция
            </div>
            <!-- Конец заголовка секции -->
        </div>
        <!-- Активная секция имеет класс active-->
        <div class="a_body margin-bottom10 active">
    		Текст активной секции
    	</div>
    </div>
    <!-- Конец первой секции -->
    
    <!-- Вторая секция -->
    <div class="acco_section">
        <div class="a_head">
            <!-- Заголовок секции -->
            <div class="h4 heading toggle">
                Вторая секция
            </div>
            <!-- Конец заголовка секции -->
        </div>
        <div class="a_body margin-bottom10">
    		Текст второй секции
    	</div>
    </div>
    <!-- Конец первой секции -->


</div>