Делаем спойлер на jQuery и подключаем его к блогу

Если Вы хотите спойлер без jQuery - то Вам сюда -Делаем спойлер для Blogger. Ну  а если Вы пришлю сюда для того, что написано в заголовке, то читаем далее

Как подключить jQuery читайте тут - Подключаем jQuery к блогу.

Почему решил делать на jQuery - да просто опыт получить. Да и красиво сделано. Поэтому переделываю имеющийся спойлер на базе библиотеки jQuery.

При этом шаблон для спойлера оставляю неизменным:

<div class="srcsoft-spoiler" title="Тут пишите заголовок спойлера">
Тут содержимое спойлера
</div>

А вот стили переработал.

<!-- SPOILER BEGIN -->
<style type="text/css" >     
.srcsoft-spoiler-wrap{
background: none repeat scroll 0 0 #E9E9E6;
border-color: #C3CBD1;
border-style: solid;
border-width: 1px 1px 1px 2px;
margin: 6px;
width: 90%;
}
.srcsoft-spoiler-head {
font-size: 11px;
line-height: 15px;
margin-left: 6px;
padding: 1px 14px 3px;
cursor: pointer;
width: 97%; // для IE6
}
.srcsoft-folded {
background: url("http://sedegoff-blogger.googlecode.com/svn/blogger/img/sedegoff.com.png")no-repeat left center transparent;
background-position: 0 -30px; 
display: block;
padding-left: 14px;
}
.srcsoft-unfolded {
background: url("http://sedegoff-blogger.googlecode.com/svn/blogger/img/sedegoff.com.png") no-repeat left center transparent;
background-position: 0 4px; 
display: block;
padding-left: 14px;
}
.srcsoft-spoiler-body {
background: none repeat scroll 0 0 #F5F5F5;
border-top: 1px solid #C3CBD1;
padding: 1px 6px 2px;
line-height: 20px;
}
</style>
<!-- SPOILER END -->

Функция для обработки спойлеров:

function SpoilerHandler(){
  //Для начала нам надо заменить конструкцию вида 
  //<div class="srcsoft-spoiler" title="Тут пишите заголовок спойлера">Тут содержимое спойлера</div>
  //
  $('div.srcsoft-spoiler').each(function(i){
    //Получаем текст и заголовок
    var caption = this.title;
    var body = this.innerHTML;
    //Создаём собственно сам спойлер
    var sp = "<div class='srcsoft-spoiler-wrap'> <div class='srcsoft-spoiler-head srcsoft-folded'>Внимание, спойлер!:"+caption+"</div>    <div class='srcsoft-spoiler-body' style='display: none;'>"+body+"</div></div>";
    this.innerHTML = sp;    
  });  
  jQuery('.srcsoft-spoiler-head').click(function(){jQuery(this).toggleClass("srcsoft-folded").toggleClass("srcsoft-unfolded").next().toggle()});
}

Справедливости ради отмечу что код не весь мой - за основу взял код тут.
Эту функцию необходимо вставить в том месте, где уже документ будет точно загружен. Иными словами или перед тегом </body>:


Или вот с такой задержкой:

document.body?SpoilerHandler():setTimeout(SpoilerHandler,300);

Ну и совсем красиво -по средством самого jQuery:

$(document).ready(function () {    
    SpoilerHandler();
});

Пример спойлера:

Тут содержимое спойлера