Спойлер для 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>

Демо:
Хотите узнать больше?
Хетепепедвоеточиедвепалкиблоггеромгтирелинуксточкару

2 комментария:

  1. не работает.
    для тех кому нужен спойлер - нашел на этом сайте: "ссылка удалена"

    ОтветитьУдалить
  2. Не надо таким образом пиарить свой сайт.
    Кстати, спойлер работает: специально проверил ещё раз на тестовом блоге.

    ОтветитьУдалить