JQuery. Выезжающая панель.

Главная > JQuery. Выезжающая панель.

Выезжающая вкладка на JQuery. Это один из самых простых эффектов, который можно реализовать при помощи библиотеки JQuery.

HTML разметка

<div class="slide-panel">
  <div class="panel">Тут размещается скрытый текст</div>
  <a href="#" class="tab">Раскрыть</a>
</div>

CSS стили

.panel {
  padding:10px;
  display: none;
  border:solid 1px #ccc;
}
.tab {
  display:inline-block;
  width:100px;
  padding:5px 10px;
  font:normal 12px Arial, Helvetica, sans-serif;
  color: #fff;
  text-decoration: none;
  background:#999;
}

Скрипт

$(document).ready(function(){
  $(".tab").click(function(){           // При нажатии на кнопку с классом .tab
    $(".panel").slideToggle('slow');    // скрытая панель разворачивается либо сворачивается
                return false; 
  });   
});

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

Изображение в выезжающей панели

Раскрыть

Комментарии

0 #1 profile 01.11.2018 16:26

Need cheap hosting? Try webhosting1st, just $10 for an year.

Цитировать

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

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