Потребовалось создать спойлер для сайта. Так как я разработчик torrentpier, то естественно мне ближе и стойлер от тп. писал его не я, но выдрать из тп и прикрутить к сайту оказалось проще простого.

Из названия темы нас понятно, что использоваться будет jQuery. Поэтому подключаем его.

<script type="text/javascript" src="/js/jquery.js"></script>

Далее нужен будет файл со стилями, который называется spoiler.css(прикреплён в аттаче).

<link rel="stylesheet" type="text/css" href="style/css/spoiler.css" />

С внешними скриптами закончили, теперь на нужную страничку вносим js код:

<script type="text/javascript">
function initSpoilers(context)
{    var context = context || 'body';
    $('div.spoiler-head', $(context))
        .click(function(){
            $(this).toggleClass('unfolded');
            $(this).next('div.spoiler-body').slideToggle('fast');
        });
}
$(document).ready(function(){ initSpoilers('body'); });
</script>

А сам код спойлера будем добавлять вот так:

<div class="spoiler-wrap">
    <div class="spoiler-head folded clickable">Заголовок спойлера</div>
       <div class="spoiler-body">Текст, помещённый в спойлер</div>
  </div>

Добавлено: 29 Сентября 2013 02:36:49 Добавил: Андрей Ковальчук Нравится 0

Добавить