Меню аккордеон на JQuery

Поговорим сегодня о навигационном меню аккордеон, который будет полезен в тот момент, когда имеется много ссылок и их надо каким-либо удобным образом скомпоновать. Суть работы скрипта следующая: при нажатии на ссылку категорию, открывается список всех ссылок на подкатегории, если нажать другую категорию, то предыдущая категория становится не активной и сворачивается. Помимо данного меню аккордеон, имеется еще много других, к примеру: адаптивное меню SlickNav, меню для сайта Superfish, фиксированное меню на JQuery и другие.

Подключим для начала библиотеку jquery.min.js. 

<script type="text/javascript" src="js/jquery.min.js"></script>

Теперь создаем функцию, которая будет сворачивать и разворачивать категории. Делается это при помощи указания класса div_cat, а также при событии click. Для отображения смены картинок - link.png и hover.png, мы будем использовать классы, которые будут изменять их положение при сворачивании и разворачивании категорий. Создаем сначала класс, который будет отображать развернутые категории, открываться будет в режиме времени 500мм.сек, затем для сворачивания. Не забываем везде указывать класс div_id, он будет отвечать за ссылки подкатегорий. С помощью свойства backgroundImage будем указывать директорию картинок.

Как Вы, наверно, уже догадались, все картинки будут храниться в папке img, а библиотека jquery.min.js в папке js.

<script type="text/javascript">
$(document).ready(function()
{
$("div.div_cat").click(function()
{
$(this).css({backgroundImage:"url(img/link.png)"})
.next("div.div_id").slideToggle(500)
.siblings("div.div_id").slideUp("toggle");
$(this).siblings().css({backgroundImage:"url(img/hover.png)"});
});
});
</script>

В коде html, основные моменты стоит учесть при взаимодействии двух классов  - div_cat и div_id. Первый отвечает за работу сворачивания и разворачивания категорий, второй за скрытие с помощью свойства display: none ссылок подкатегорий.

<div class="div_cat">Ford</div>
 <div class="div_id">
   <a href="#">Focus</a>
   <a href="#">Fiesta</a>
   <a href="#">KA</a>
   <a href="#">Laser</a>
   <a href="#">Sierra</a>
   <a href="#">GT</a>
   <a href="#">Flex</a>
   <a href="#">Fusion</a>
   <a href="#">Kuga</a>
 </div>
<div class="div_cat">Audi</div>
 <div class="div_id">
     <a href="#">A1</a>
     <a href="#">200</a>
     <a href="#">Q3</a>
     <a href="#">TT</a>
     <a href="#">AllRoad</a>
     <a href="#">Quattro</a>
     <a href="#">R8</a>
     <a href="#">A2</a>
     <a href="#">A3</a>
     <a href="#">A4</a>
     <a href="#">A5</a>
     <a href="#">Coupe</a>
     <a href="#">Cabriolet</a>
     <a href="#">NSU RO 80</a>
     <a href="#">RS2</a>
     <a href="#">RS3</a>
     <a href="#">RS4</a>
     <a href="#">RS5</a>
     <a href="#">RS6</a>
     <a href="#">RS7</a>
     <a href="#">SQ5</a>
 </div> 

В стилях класс div_cat отвечает за все категории, которые также имеют справа значок картинку желтого и красного цвета при сворачивании и разворачивании. Класс div_id имеет обязательное свойство backgroud: white no-repeat, что позволяет закрывать белым цветом картинки красного и желтого цвета, также как уже говорилось выше, имеется обязательное свойство display: none, которое позволяет скрывать ссылки подкатегорий. В классе div_id a, который придает ссылкам нужные свойства, стоит отметить background: white, который придает фону белый цвет.

.div_cat {
  padding: 5px 5px;
    cursor: pointer;
    margin:4px;
  background: #9e8eff url("img/hover.png") no-repeat right;
    color: white;
  font-size: 14px;
  width:430px;
}

.div_id {
  background: white no-repeat;
    display: none; 
  margin-top: 5px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.div_id a{      
  color:blue;
  background: white;
  text-decoration:none;
  padding: 5px 5px;
  font-size: 14px;
 }

.div_id a:hover{
  color: red;
  text-decoration: none;
}

Надеюсь, моя работа со скриптом меню аккордеона,вам понравилась и сможете ее применить у себя на сайте. Большое спасибо за внимание! Отвечу на все вопросы, оставляйте свои комментарии!