Аккордеон на JQuery. Применяется для компактного размещения большого количества информации на сайте.

Сделаем сначала самый простой вид аккордеона и постепенно будем усложнять его функционал.

HTML разметка

<ul class="accordion">
    <li>
        <a href="#">Заголовок 1</a>
        <div class="st-content">Наполнение первой вкладки</div>
    </li>
    <li>
        <a href="#">Заголовок 2</a>
        <div class="st-content">Наполнение второй вкладки</div>
    </li>
    <li>
        <a href="#">Заголовок 3</a>
        <div class="st-content">Наполнение третьей вкладки</div>
    </li>
</ul>
 

CSS стили

.accordion{
  position:relative;
  width:200px;
  padding:0;
  margin:0;
}
.accordion li{
  padding:0;
  margin:0 0 1px;
  list-style:none;
  background:#999;
}
.accordion li a{
  display:block;
  padding:5px 10px;
  font:normal 12px Arial, Helvetica, sans-serif;
  color:#fff;
  text-decoration:none;
}
.accordion li a:hover{
  background:#777;
}
.st-content{
  display:none;
  padding:5px 10px;
  background:#ddd;
}

Скрипт

$(document).ready(function(){
  $(".accordion>li>a").click(function(){                          // При нажатии на заголовок аккордеона
  $(this).parent().children(".st-content").slideToggle('slow');   // Содержимое разворачивается или сворачивается
        return false;                                             // в зависимости от первоначального положения
  });
});

Пример работы выпадающей вкладки на JQuery.




Комментарии  

0 #1 profile 02.11.2018 16:58
Need cheap hosting? Try webhosting1st, just $10 for an year.

Цитировать

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


Защитный код
Обновить