Раскрывающийся блок¶
Инструкция о том, как сделать раскрывающийся по клику блок.
Нажмите здесь для детальной информации¶
Всё очень просто! Достаточно:
- Создать новый div с уникальным id , например,
id="my_div". - Создать новую ссылку (кнопку) и задать id как у блока, только с префиксом
sw_, в данном случае:id="sw_my_div". - Добавить на ссылку класс
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 блоках.
