Раскрывающийся блок

Инструкция о том, как сделать раскрывающийся по клику блок.

Нажмите здесь для детальной информации

Всё очень просто! Достаточно:

  1. Создать новый div с уникальным id , например, id="my_div".
  2. Создать новую ссылку (кнопку) и задать id как у блока, только с префиксом sw_, в данном случае: id="sw_my_div".
  3. Добавить на ссылку класс cm-combination.

Всё.

Пример. Создайте HTML блок с кодом:

<a id="sw_my_div" class="cm-combination">Открыть полный текст</a>

<div id="my_div" class="hidden">
    <p>
        Я вас люблю, хоть и бешусь,<br/>
        Хоть это труд и стыд напрасный,<br/>
        И в этой глупости несчастной<br/>
        У ваших ног я признаюсь!
    </p>
</div>

Иконки переключатели или «Вкл/Выкл»

Можно использовать иконки или кнопки «Вкл/Выкл», для этого используются id для ссылок:

  • on_[id_блока] — открыть
  • off_[id_блока] — закрыть

[id_блока] — уникальный id блока который нужно открывать/закрывать

Пример. Два раскрывающихся блока. Один с помощью иконки, второй текстовыми ссылками. Также, возможно использовать изображения <img />

<i id="on_id_1" class="ty-icon-down-open cm-combination"></i>
<i id="off_id_1" class="ty-icon-up-open cm-combination hidden"></i>

<p id="id_1" class="hidden">
    Без вас мне скучно, — я зеваю;<br/>
    При вас мне грустно, — я терплю;<br/>
    И, мочи нет, сказать желаю,<br/>
    Мой ангел, как я вас люблю!
</p>

<br/>

<a id="on_id_2" class="cm-combination">Вкл.</a>
<a id="off_id_2" class="cm-combination hidden">Выкл.</a>

<p id="id_2" class="hidden">
    Когда я слышу из гостиной<br/>
    Ваш легкий шаг, иль платья сум,<br/>
    Иль голос девственный, невинный,<br/>
    Я вдруг теряю весь свой ум.
</p>

Одновременное использование нескольких переключателей

<a href="#" id="sw_id_{$block.block_id}" class="cm-combination">Узнать больше</a>
<i id="on_id_{$block.block_id}" class="ty-icon-down-open cm-combinations"></i>
<i id="off_id_{$block.block_id}" class="ty-icon-up-open cm-combinations hidden"></i>

<div id="id_{$block.block_id}" class="hidden">
    Вы улыбнетесь — мне отрада;<br/>
    Вы отвернетесь — мне тоска;<br/>
    За день мучения — награда<br/>
    Мне ваша бледная рука.
</div>

{$block.block_id} — id блока, доступен в SMARTY блоках.