Показать / Скрыть по клику (jQuery)

by आर्थर

HTML

<div class="wrap">
    <p>
        С помощью нескольких строк javascript, вы сможете легко организовать <span class="splLink" id="sp_1">скрытые блоки с содержанием</span>, раскрывающиеся по клику.
    </p>
    <div class="terms" id="box_1">
        Самый известный пример использования скрытого текста, это хорошо всем знакомые "спойлеры" на форумах .....
    </div>
        <p>
            Закрывать блоки с скрытым содержанием, так же можно при нажатии на любую часть экрана, для этого <span class="splLink" id="sp_2">достаточно одной строки в js</span>.
    </p>
    <div class="terms" id="box_2">
        <code>
            $(document).click(function(){ 
               $('.terms').hide('slow'); 
            });
        </code>
    </div>
    <p>
        Обратите внимание на то, что у каждой кликабельной надписи и содержимого скрытых блоков есть идентификатор (id). Так вот, например, в нашем случае, текстовому отрывку(тег span) с id="sp_1" соответствует div с id="box_1", тексту с id="sp_2" соответственно div с id="box_1".
    </p>   
    <p>
        При создании спойлеров рекомендую менять только цифры, чтобы не вносить изменения в javascript код!
    </p>
</div>

CSS

/* контейнер демо */
body{
    font-family: helvetica, arial;
}
.wrap {
    max-width: 860px;
    padding: 10px;
    margin: 0 auto;  
}
/* скрытый блок (спойлер) */
.terms {
    display:none;
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    padding: 10px;
}
 .splLink {
     cursor:pointer;
     border-bottom:1px dashed green;
     color:green;
 }

JavaScript

$(document).ready(function(){
 $('.splLink').click(function(){
  id='#box'+$(this).attr("id").substr(2);
  $(id).slideToggle('slow');
  return false;
 });
    });
 $(document).click(function(){ 
     $('.terms').hide('slow'); 
 });