More Related Content
Similar to аккордеон (20)
аккордеон
- 1. Аккордеон
Код в виджет:
<div class="accordion">
<section>
<div class="a-title">имя пункта</div>
<div class="a-content">
Ваш текст
</div><!-- /.a-content -->
</section>
<section>
<div class="a-title">Имя пункта</div>
<div class="a-content">
Ваш текст
</div><!-- /.a-content -->
</section>
</div>
Его вставляем в нужное место, где должен отображаться аккордеон
Далее идём в пу клиента, в разделе “Свой код” устанавливаем скрипты:
Стили:
<style>
.accordion {float:left;width:100%;margin: 0 0 10px 0;overflow:hidden;position:relative;}
.a-title {position:relative;cursor:pointer;float:left;width:100%;line-height:24px;padding: 10px
50px 10px 20px;background:#e0e0e0;border-radius:6px;transition: .3s;}
.a-title:after {content: "f107"; line-height: 24px;font: normal normal normal 18px/1
FontAwesome;position:absolute;top:50%;right:20px;margin-top:-8px;transition: .5s;}
.a-content {display:none;float:left;width:100%;padding: 0 30px 0 30px;margin-
top:30px;border-bottom:3px solid #eee;border-radius: 0 0 6px 6px;}
.accordion section {float:left;width:100%;background:#f5f5f5;border-radius:6px;margin: 0 0
15px 0;}
.a-opened .a-title:after {transform: rotate(-180deg);transition: .5s;}
.a-opened .a-title {color: #1c2a33;transition: .3s;}
</style>
и
Скрипт в /body:
<script>
require(['jquery'], function ($) {
$('.a-title').on('click', function(){
var ac = $(this).parent();
if (ac.hasClass('a-opened')) {
ac.removeClass('a-opened');