Broco Broco

Аккардеон на jQuery – мини Плагин

19.07.09 / Категории jQuery, Верстка | Оставить комментарий

Существует куча слайдеров и аккардеонов, но они все требуют подключения больших кусков кода, плагина како-нить немаленького или дополнения к библиотеке, ядро эффектов.

Я решил написать свой очень маленький аккардон.

Вот что получилось. Cмотреть

Для того чтобы у вас заработало нужно сделать следующее.

1) подключить jQuery библиотеку.

1

 <script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jquery-1.2.6.js"></script>

2) Если у вас установлена какая-то еще библиотека, то возможны конфликты с jQuery, чтобы этого избежать делаем так.

  <script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" language="javascript" >
jQuery.noConflict();
</script>

Теперь конфликтов нет, чтобы работало все таким образом значки $ в нашем коде jQuery заменяем на jQuery.

3) Создаем блоки с классом “acc”, внутри которых будут по одному заголовку, на который мы будем жать для отображения скрытого содержимого с классом acc-h2, и само содержимое acc-div.

 <div class="acc"> 
	   <h2 class="acc-h2">1 Заголовок</h2>
	   <div class="acc-div">
	    <p>
		   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
	  </div>
	  </div>
	  <div class="acc"> 
	  <h2  class="acc-h2">2 Заголовок</h2>
	  <div  class="acc-div">
	   <p>
		   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
	  </div>
	  </div>

4) Прописываем классы для всех элементов если будете менять имена, незабудте их поменять в jQuery коде.

.opened – это класс для открытого Заголовка
.acc-h2 – это класс для закрытого
.acc-div – класс для контента

  <style type="text/css">
#accordeon { padding-top:30px; width:400px; margin:0 auto;}
 .acc-h2 { font-size:14px; background:url(../images/arrow-closed.gif) no-repeat 470px 8px #bebebe; color:#fff; padding :5px 50px 5px 10px; font-weight:bold; margin:0px 0px 1px 0px; cursor:pointer;}
 .opened{ background:#990000; }
 .acc-div { display:none;}
 .acc-div p { padding:20px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#666666;}
</style>

Комментарии

Оставить комментарий