Что делать разработчику сайта, если на страницу необходимо вывести большое количество информации и при этом сохранить как можно больше места? Одним из самых оптимальных вариантов будет представить информацию в виде так называемого аккордеона.
Аккордеон представляет собой несколько блоков, каждый из которых содержит заголовок и знак плюс. Сам контент изначально скрыт. При нажатии на заголовок, аккордеон будет разворачиваться, и раскрывать нужную информацию.
Такое решение выглядит достаточно эффектно и встречается на многих сайтах. Аккордеон применяется для отображения вопросов и ответов, справочной или структурированной информации.
И так приступим к созданию такого аккордеона. При этом необходимо реализовать адаптивность под мобильные устройства. Это будет достигаться за счет css стилей. Также для работы аккордеона нам понадобится библиотека jQuery.
Для начала между тегами head подключим библиотеку.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>Также нам понадобится шрифт font-awesome для отображения значков плюса и минуса. Скачиваем архив со шрифтом. Распаковываем и закачиваем файлы на сервер. Между тегами head прописываем путь к файлу font-awesome.min.css. В нашем случае путь будет таким:
<link rel="stylesheet" href="/article/16/resources/css/font-awesome.min.css">Более подробную информацию о шрифте вы можете узнать в статье про Font Awesome.
Далее создадим HTML верстку:
<div class="accordion-container">
<h2>Популярные языки программирования</h2>
<div class="set">
<a href="#">PHP<i class="fa fa-plus"></i></a>
<div class="content">
<p>Скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.</p>
</div>
</div>
<div class="set">
<a href="#">JavaScript<i class="fa fa-plus"></i></a>
<div class="content">
<p>Мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.</p>
</div>
</div>
<div class="set">
<a href="#">C#<i class="fa fa-plus"></i></a>
<div class="content">
<p>Объектно-ориентированный язык программирования. Разработан в 1998—2001 годах группой инженеров компании Microsoft под руководством Андерса Хейлсберга и Скотта Вильтаумота как язык разработки приложений для платформы Microsoft .NET Framework. Впоследствии был стандартизирован как ECMA-334 и ISO/IEC 23270.</p>
</div>
</div>
<div class="set">
<a href="#">Java<i class="fa fa-plus"></i></a>
<div class="content">
<p>Строго типизированный объектно-ориентированный язык программирования, разработанный компанией Sun Microsystems (в последующем приобретённой компанией Oracle). Разработка ведётся сообществом, организованным через Java Community Process, язык и основные реализующие его технологии распространяются по лицензии GPL. Права на торговую марку принадлежат корпорации Oracle.</p>
</div>
</div>
<div class="set">
<a href="#">Python<i class="fa fa-plus"></i></a>
<div class="content">
<p>Высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемости кода. Синтаксис ядра Python минималистичен. В то же время стандартная библиотека включает большой объём полезных функций.</p>
</div>
</div>
</div>В данном случает тег a представляет собой заголовок, тег i является значком "плюс" или "минус", а тег div с классом content содержит текстовую информацию.
Для стилизации аккордеона и обеспечения адаптивности добавим css код следующего вида:
.accordion-container {
position: relative;
max-width: 480px;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.accordion-container > h2 {
text-align: center;
color: #444444;
padding-bottom: 10px;
margin-bottom: 30px;
border-bottom: 1px solid #cccccc;
}
.set {
position: relative;
width: 100%;
height: auto;
background-color: #f4f4f4;
}
.set > a {
display: block;
padding: 10px 15px;
text-decoration: none;
text-align: left;
color: #555555;
font-weight: 700;
border-bottom: 1px solid #dddddd;
transition: all 0.2s linear;
}
.set > a i {
position: relative;
float: right;
margin-top: 4px;
color: #666666;
}
.set > a.active {
background-color: #D35959;
color: #ffffff;
}
.set > a.active i {
color: #ffffff;
}
.content {
position: relative;
width: 100%;
background-color: #ffffff;
border-bottom: 1px solid #dddddd;
display: none;
}
.content p {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin: 0;
color: #343434;
text-align: justify;
}Класс .accordion-container содержит параметр max-width: 480px, который ограничивает аккордеон по ширине, а также параметр width: 100%, который позволяет сжиматься под размеры мобильных устройств.
Теперь, чтобы реализовать раскрытие контента, напишем небольшой JavaScript код:
$(document).ready(function(){
$(".set > a").on("click", function(e){
e.preventDefault();
if($(this).hasClass('active')){
$(this).removeClass("active");
$(this).siblings('.content').slideUp(200);
$(".set > a i").removeClass("fa-minus").addClass("fa-plus");
}else{
$(".set > a i").removeClass("fa-minus").addClass("fa-plus");
$(this).find("i").removeClass("fa-plus").addClass("fa-minus");
$(".set > a").removeClass("active");
$(this).addClass("active");
$('.content').slideUp(200);
$(this).siblings('.content').slideDown(200);
}
});
});Адаптивный аккордеон готов! Вы можете посмотреть работу аккордеона на демо-странице.