Как сделать сворачивающиеся / разворачивающиеся записи (FAQ) + кнопка "Посмотреть все"

Задача: создать набор блоков, у которых видны заголовки, а тело скрыто.
При клике по заголовку тело плавно разворачивается, и значок "развернуть" поворачивается на 180 градусов.

Когда щелкают по "Смотреть все", разворачиваются только (важно!) те блоки, которые были свернуты.
Надпись "Смотреть все" меняется на "Свернуть все".

Список в свернутом виде:

Список с одним развернутым блоком:

Изображение стрелочки (можно скачать этот png-файл):

 HTML

Для того, чтобы сделать основу, нужно добавить разметку в файл *.tpl:

         <div class="faq_list">
            <div class="faq_item">
                <div class="faq_item_title">
                    <div class="faq_item_title_inner">
                        Заголовок блока 1
                    </div>
                </div>
                <div class="faq_item_body">
                   Текст внутри блока 1
                </div>
            </div>
            <div class="faq_item">
                <div class="faq_item_title">
                    <div class="faq_item_title_inner">
                        Заголовок блока 2
                    </div>
                </div>
                <div class="faq_item_body">
                    Текст внутри блока 2
                </div>
            </div>
            <div class="faq_item">
                <div class="faq_item_title">
                    <div class="faq_item_title_inner">
                        Заголовок блока 3
                    </div>
                </div>
                <div class="faq_item_body">
                   Текст внутри блока 3
                </div>
            </div>
            <div class="faq_show_all">
                <div class="faq_item_title">
                    <div class="faq_item_title_inner show_all">
                        Смотреть все
                    </div>
                </div>
            </div>
        </div>

CSS

Для стилизации в CSS добавляем следующий код:

.faq_list{
	position: relative;
	color: #192430;	
}
.faq_item{
	box-sizing: border-box;
	border-left: 8px solid #a2adb6;
	padding: 10px 0 10px 15px;
}
.faq_item_title{
	box-sizing: border-box;
	font-size: 20px;
	text-transform: uppercase;
	position: relative;
}
.faq_show_all .faq_item_title{
	font-weight: 900;
	padding-left: 23px;
	margin-top: 20px;
}
.faq_item_title_inner{
	display: inline-block;
	position: relative;
	padding: 0 60px 0 0;
	cursor: pointer;
}
.faq_item_title_inner:hover:before{
	transform: translateY(1px);
}
.faq_item_title_inner:before{
	position: absolute;
	content: '';
	right: 0;
	top: 0;
	width: 30px;
	height: 100%;
	background: url(../images/faq_arrow_down.png) no-repeat center center;
	cursor: pointer;
	transition: .2s;
	transition-timing-function: ease-in-out;
}
.faq_item_title_inner.open:before{
	transform: rotate(180deg);
}
.faq_item_body{
	font-size: 16px;
	padding: 10px;
	box-sizing: border-box;
	display: none;
}

 JavaScript

Также пишем скрипт, который отвечает за логику работы "выпадашек" и за анимацию и добавляем этот код в главный файл *.js (обычно это main.js).

Место для вставки кода - внутри фигурных скобок у функции вида:

$(document).ready(function(){});

или

$(function(){});

$('.faq_item_title_inner').on('click',function(){
        $(this).parents('.faq_item').find('.faq_item_body').slideToggle(300);
        $(this).toggleClass('open');
        if ($(this).hasClass('show_all')){
                if ($(this).hasClass('open')) {
                    $(this).html('Свернуть все');
                $('.faq_item_title_inner:not(.open)').trigger('click');
            } else {
                $(this).html('Смотреть все');
                $('.faq_item_title_inner.open').trigger('click');
            }
        }
    });

 Пример реализации сворачивающихся / разворачивающихся записей (FAQ) на SimplaCMS можно посмотреть на сайте migis.org, который мы делали.