21 октрября 11:18
Автор: Rusya Рубрика: Скрипты на JS Комментариев нет

Делаем спойлер для сайта с использованием О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;
}

Вот теперь все готово на сто процентов, пользуйтесь на здоровья. Скачать демо пример

Подписаться на БЕСПЛАТНЫЕ уроки!

Буду признателен, если сделаете репост статьи:  

Если вам понравилась статья, то вы можете подписаться на RSS-ленту.
Просмотров: 1 115

Комментариев нет

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: