Главная › Новости

Как скрыть показать текст

Опубликовано: 22.08.2018

Установка и настройка плагина Advanced Spoiler на Wordpress — показать, скрыть текст

Задача заключается в том, чтобы нажав на ссылку/кнопку, появлялся/скрывался элемент (изображение, таблица, блок и т.д.). Для чего достаточно добавить небольшой CSS, скрипт не нужен.

нажать

исчезающий текст

<style> .del { display: none; } .del:not(:checked) + label + * { display: none; } .del:not(:checked) + label, .del:checked + label { display: inline-block; padding: 2px 10px; border-radius: 2px; color: #fff; background: #4e6473; cursor: pointer; } .del:checked + label { background: #e36443; } </style> <input type="checkbox" id="raz" class="del" checked="checked" /><label for="raz" class="del" >нажать</label><div>исчезающий текст</div> количество элементов на странице с class="del" может быть сколь угодно велико id — идентификационный номер. Должен быть индивидуальным на html странице for должен совпадать с id если первоначально нужен невидимый элемент, который в последствии появляется, нужно убирать checked="checked"

Все действия производим на вкладке "Шаблон" .

Как скрыть показать ячейки в Excel

Шаг 1. Два вхождения кода

<h4> <data:post.commentLabelFull/>: </h4> заменяем на <input checked='checked' class='nocomments' id='checkboxcomments' type='checkbox'/><label for='checkboxcomments'> <data:post.commentLabelFull/> </label>

Шаг 2. Выделенные участки кода

.comments h4 { margin: 1em 0 0; font: $(post.title.font); } заменяем на .comments h4, .nocomments + label { margin: 1em 0 0; font: $(post.title.font); } .nocomments + label + div, .nocomments { display: none; } .nocomments:checked + label + div { display: block; }

Можно ещё попробовать одновременное использование с формой отзывов социальных сетей .

Результат можно посмотреть в Приложении 1 .

Тренироваться будем на гаджете "Архив блога". Активизируем вкладку "Шаблон" .

Шаг 1. Код

<b:widget id='BlogArchive1' locked='false' title='Архив блога' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/> </h2> </b:if> заменяем на

<b:widget id='BlogArchive1' locked='false' title='Архив блога' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <input class='no' id='checkboxArchive' type='checkbox'/><label for='checkboxArchive'> <data:title/> </label> </b:if>

Шаг 2. Выделенные участки кода

h2 { font: $(widget.title.font); text-transform: $(widget.title.text.transform); color: $(widget.title.text.color); margin: .5em 0; } заменяем на h2, .no + label { font: $(widget.title.font); text-transform: $(widget.title.text.transform); color: $(widget.title.text.color); margin: .5em 0; } .no + label + div, .no { display: none; } .no:checked + label + div { display: block; } .no + label:after {content: " \25bc";} .no:checked + label:after {content: " \25b2";}