Спойлер для 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(http://4.bp.blogspot.com/_k_DnmK4oz2Q/S5DXJbEgB5I/AAAAAAAAA5A/WJ5egwlN0-s/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. Не надо таким образом пиарить свой сайт.
    Кстати, спойлер работает: специально проверил ещё раз на тестовом блоге.

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