Пример работы Аккордеона:
Заголовок Панели №1
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.
Заголовок Панели №2
Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого.
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.
Заголовок Панели №3
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.
Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.
Для работы «аккордеона» понадобится подключенная библиотека jQuery. Как вы помните, подключить её можно напрямую с серверов Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Вся html-конструкция аккордеона, представляет из себя базовый div-контейнер с вложениями, которому определено максимальное значение ширины max-width: 600px; (опционально) при 100% относительно родительского блока, в котором он будет размещён, что делает аккордеон гибким при размещении в различных частях шаблона, будь то боковая панель или контейнер с основным контентом.
В примере максимально-возможную ширину выставил в 600px, которую вы всегда легко сможете изменить в ту или иную сторону, с учётом ваших потребностей.
Шаг 1) добавить HTML:
<!-- блок аккордеон -->
<div class="accordion">
<section class="accordion_item">
<h3 class="title_block">Заголовок Панели №1</h3>
<div class="info">
<p class="info_item">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
<p class="info_item">Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
</div>
</section>
<section class="accordion_item">
<h3 class="title_block">Заголовок Панели №2</h3>
<div class="info">
<p class="info_item"><img src="https://placeimg.com/250/200/nature" class="img-left">Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого.</p>
<p class="info_item">Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
</div>
</section>
<section class="accordion_item">
<h3 class="title_block">Заголовок Панели №3</h3>
<div class="info">
<p class="info_item"><img src="https://placeimg.com/250/200/animals" class="img-right">Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.</p>
<p class="info_item">Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.</p>
</div>
</section>
</div>
<!-- конец блока аккордеон -->
Шаг 2) добавить CSS:
/* стили блока аккордеон */
.accordion {
width:100%;
max-width: 600px;
margin: 0 auto
}
/* секции аккордеона */
.accordion .accordion_item {
margin-bottom:1px;
position:relative
}
/* заголовки панелей аккордеона */
.accordion .title_block {
font-weight: 400;
font-size: 18px;
color: #eee;
cursor:pointer;
background: #009688;
padding:10px 55px 10px 15px;
-webkit-transition:all .2s linear 0;
-webkit-transition-delay:.2s 0;
transition:all .2s linear 0
}
/* переключатель панелей, положение вниз */
.accordion .title_block:before {
content:'';
height:8px;
width:8px;
display:block;
border:2px solid #fefefe;
border-right-width:0;
border-top-width:0;
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
position:absolute;
right:20px;
top:18px
}
/* активный переключатель, положение вверх */
.accordion .active_block .title_block:before {
border:2px solid #fefefe;
border-left-width:0;
border-bottom-width:0;
top:18px
}
.accordion .title_block:hover {
background: #26A69A
}
/* заголовок активного блока */
.accordion .active_block .title_block {
background: #26A69A;
color:#fefefe
}
/* блоки с содержанием */
.accordion .info {
display:none;
padding:10px 15px;
overflow: hidden;
background:#f7f7f7
}
/* параграф внутри блоков с содержанием */
.accordion .info_item {
margin-bottom:10px
}
/* картинки внутри аккордеона */
.accordion .info img {
height: auto;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* полноразмерная картинка */
.large-img {
width: 100%;
margin-bottom: 10px;
}
/* миниатюра слева */
.img-left {
width: 25%;
float:left;
margin:5px 15px 5px 0;
}
/* миниатюра справа */
.img-right {
width: 25%;
float:right;
margin:5px 0 5px 15px;
}
Для расширения базового функционала «аккордеона» по умолчанию, прописал отдельные стили для изображений. Картинки в секциях, вы можете отправить, как влево, так и вправо, для этого достаточно добавить тегу img соответствующий класс class="img-left" или class="img-right". В результате получите встроенные в текст миниатюры. Позиционирование изображений определяется через float: right и float: left соответственно.
Для полноразмерных изображений выставил 100% ширину, с отступом от нижнего края в 10px.
Значения ширины в %, обеспечивает возможность пропорционального изменения картинок, при изменении размеров базового контейнера «аккордеона». Конечно же, никто и ничто не мешает вам использовать фиксированные размеры изображений:)
И так, основную библиотеку javascript jQuery подключить вы надеюсь не забыли, теперь к документу html подключим небольшой, исполняемый js, через функции которого, и обеспечим надёжную движуху нашего аккордеона:
Шаг 3) добавить JavaScript jQuery:
! function(i) {
var o, n;
i(".title_block").on("click", function() {
o = i(this).parents(".accordion_item"), n = o.find(".info"),
o.hasClass("active_block") ? (o.removeClass("active_block"),
n.slideUp()) : (o.addClass("active_block"), n.stop(!0, !0).slideDown(),
o.siblings(".active_block").removeClass("active_block").children(
".info").stop(!0, !0).slideUp())
})
}(jQuery);
Если ничего не упустил, то на этом наверное и всё. Отзывчивый «до жути» и вполне себе автономный «аккордеон», полностью готов к работе.
Покопаться в коде можно здесь
Буду всем признателен, если поддержите проект - добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях
Отправить комментарий
0 Комментарии