Вертикальный аккордеон – простое решение для отображения данных на сайте, предлагающий функцию сворачивания и разворачивания контента. Адаптивный аккордеон будет открывать разделы вниз по вертикали с плавным появлением содержания в них.
Это изюминка в структурировании и удобстве пользования сайтом, положительно влияющая на юзабилити. Меню вертикального аккордеона можно использовать в интернет-магазинах, сайтах-каталогах, везде, где выполняется объёмная сортировка. Для реализации примера вертикального аккордеона использовалась библиотека Jquery.
Для начала пропишем в заголовок страницы, между тегами
следующее:Если у вас файлы jquery.js и style.css лежат в других местах, то укажите путь к ним, с учетом места где они расположены.
содержимое файла style.css
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
body,html{}
h1,h2,h3,h4{text-transform:uppercase;text-align:center;padding:0;margin:0}
img{width:100%}
table{width:100%;border-collapse:collapse}
table tr td{border:1px solid rgba(0,0,0,0.1);text-align:center}
#accordeon .accordeon-head{background:rgb(40,180,48,0.2) none repeat scroll 0% 0%;cursor:pointer;padding:12px 10px;box-shadow:0 0 10px 1px rgba(0,0,0,0.1)inset;margin-top:5px}
#accordeon .accordeon-head:hover{background:rgb(40,180,48,0.1)}
#accordeon .accordeon-body{display:none;padding:0;border:0;margin:5px 0}
#accordeon .accordeon-body img{max-height:400px;object-fit:cover}
#accordeon .accordeon-body video{right:0;bottom:0;top:0;left:0;width:100% !important;margin:0;padding:0;object-fit:fill}
#accordeon .accordeon-body .text{font-size:13px;margin:10px 0 0 0;padding:0;text-align:justify}
#accordeon .accordeon-body h3,h4{text-align:left}
#accordeon .accordeon-body h4 span{border-bottom:2px solid black}
#accordeon .accordeon-body-first{display:block}
#accordeon .accordeon-active{background:rgba(40,180,178,0.2)!important}
#accordeon .accordeon-active:hover{background:rgba(40,180,178,0.1)!important}
.bg{background:rgba(0,0,0,0.07);padding:10px!important}
.wrap{width:40%;margin:0 auto}
@media screen and (max-width:992px){.wrap{width:100%}}в конце страницы, перед тегом
