Тут текст
Заголовок для окна
Вкладки весьма интересная и удобная штука при создании сайта, она позволяет правильно организовать информацию, при этом сэкономив немного места на сайте.
Ниже реализация через сниппет Аккордион
Вставляется этот сниппет в визуальном редакторе.
Текст #1
Текст #2
Текст #3
Текст #4
Текст #5
Текст #6
Текст #7
Текст #8
Текст #9
Текст #10
И тут какой нибудь остальной текст статьи
Далее опять после текста можно поставить ещё этот же сниппет .
Какой то Текст
Текст #2
Открываем статью Нажимаем справа на стрелочку
Нажимаем на сниппеты и переносим сниппет аккордион в нужное вместо текста
Меняем назавания и текст. Желательно текст менять в окне html, дабы не испортить разметку, а в окне текста форматировать
Способ добавления через HTML
Достаточно простой способ. Ниже приведён код
Главное запомнить, что ID должны быть в тексте уникальными, они выделенны цветом в тексте примера кода.
Таким образом мы можем втавлять это в любом месте статьи и безгранично.
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default" id="id11">
<div class="panel-heading" role="tab" id="id11">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#coll11" aria-expanded="false">
<i class="fa fa-bars"></i>Какое то название
</a>
</h4>
</div>
<div id="coll11" class="panel-collapse collapse">
<div class="panel-body">
Какой то Текст
</div>
</div>
</div>
<div class="panel panel-default" id="id12">
<div class="panel-heading" role="tab" id="id12">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#coll12" aria-expanded="false">
<i class="fa fa-bars"></i> Название #2
</a>
</h4>
</div>
<div id="coll12" class="panel-collapse collapse">
<div class="panel-body">
Текст #2
</div>
</div>
</div>
</div>
Официальная информация тут http://bootstrap-3.ru/css.php#collapse