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

• Кнопка, нажав на которую появляются/прячутся комментарии Blogger
• Показать/скрыть содержимое гаджета Blogspot
• Как скрыть показать текст на HTML
• Как скрыть ссылку/блок от поискового робота
• Исчезающий при наведении курсора мышки элемент на CSS
• Как скрыть часть текста от индексации Яндекса и Google
• зафиксировать панель

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

нажать

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

<style>
.del { display: none; }
.del:not(:checked) + label + * { display: none; } /* фактически нужна только одна строка */

/* вид CSS кнопки */
.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>

1. количество элементов на странице с class="del" может быть сколь угодно велико
2. id — идентификационный номер. Должен быть индивидуальным на html странице
3. for должен совпадать с id
4. если первоначально нужен невидимый элемент, который в последствии появляется, нужно убирать checked="checked"

Кнопка, нажав на которую появляются/прячутся комментарии Blogger

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

Шаг 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  { /* возможны вариации, ищем (Ctrl+F) "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; }

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

Показать/скрыть содержимое гаджета Blogspot

Результат можно посмотреть в Приложении 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";} /* стрелочка вниз */