Делаем спойлер для сайта с использованием Оquery
Установка спойлера на сайт дело не хитрое если вы используете одну из популярных cms таких как Joomla, Drupal и тд... Но если ваш сайт самописный то и спойлер для сайта придется писать самому. На самом деле сделать спойлер это время 10 минут, итак начнем. Для начала нам нужно подключить библиотеку Оquery которую можно скачать на оф сайте http://jquery.com. Данная библиотека нам понадобится для плавного открытия спойлера.
Теперь все поэтапно:
Подключаем Оquery к нашему документу, если не хотите качать библиотеку то ее можно подключить к нашему документу так:
<......script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> <...../script>
Теперь нам понадобится не большой скрипт который нужно разместить между тегами head, этот скрипт и будет открывать и закрывать наш спойлер:
<....script language="JavaScript" type="text/javascript"> $(document).ready(function(){ $('.spoiler_links').click(function(){ $(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); }); <..../script>
Далее идет сам спойлер:
<div> <a href="" class="spoiler_links">Спойлер №1</a> <div class="spoiler_body"> Здесь ваш скрытый текст </div> </div>
В принципе все готово и наш спойлер уже работает НО еще нужно в css вашего сайта прописать класс.spoiler_body который изначально держит наш спойлер закрытым:
.spoiler_body{ display:none; cursor:pointer; }
Вот теперь все готово на сто процентов, пользуйтесь на здоровья. Скачать демо пример