Спойлер для blogger на jQuery

Если статья длинная и специфические детали нужно скрыть (кому надо - откроет), обычно применяется спойлер. Особенно это востребовано на форумах. В блоге нечто подобное можно сотворить с помощью библиотеки jQuery.


Простейший спойлер.

Помещаем это js-безобразие в /head

<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

Затем ищем css блоки, наподобие:
#header-wrapper {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-KZc5oQua21yZ2KdSKPiJdx86qDBaEbWInEcYtVvAEpvN5BXX4q4QdZcUqul5FH7aN0zKE_OQcEwQAk9q7i_xhemb6yXJgmKAlc2Fs6Oy6gMT9l2Bgp1ev1OXIgW6Ie419CPkInOkzOza/s1600/arrowup.jpg) no-repeat left bottom;
height: 90px;
position: relative;
text-align: left;
width: 763px;
overflow: hidden;
}

И вставляем свой блок стилей для спойлера:
.splCont
{display:none;
border:1px solid #cccccc;
padding:3px 5px;}

Теперь при написании постов можно использовать:

<div><a href="javascript://" class="splLink">Спойлер</a><div class="splCont">
  ваш текст
</div></div>

Демо:

Хотите узнать больше?

Хетепепедвоеточиедвепалкиблоггеромгтирелинуксточкару