SlideShare a Scribd company logo
1 of 2
Аккордеон
Код в виджет:
<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');
ac.find('.a-content').slideUp(500);
}
else {
ac.addClass('a-opened');
ac.find('.a-content').slideDown(500);
}
});
})
</script>

More Related Content

Similar to аккордеон

Web осень 2013 лекция 4
Web осень 2013 лекция 4Web осень 2013 лекция 4
Web осень 2013 лекция 4Technopark
 
04 - Web-технологии. CSS - язык описания стилей
04 - Web-технологии. CSS - язык описания стилей04 - Web-технологии. CSS - язык описания стилей
04 - Web-технологии. CSS - язык описания стилейRoman Brovko
 
Кроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаКроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаMedia Gorod
 
KnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-ОнлайнKnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-Онлайн2ГИС Технологии
 
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин ИльяDUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Ильяit-people
 
стальканат
стальканатстальканат
стальканатAuditorr
 
Box model, display and position (HTML5 тема 07 - box model, display position)
Box model, display and position (HTML5 тема 07 - box model, display position)Box model, display and position (HTML5 тема 07 - box model, display position)
Box model, display and position (HTML5 тема 07 - box model, display position)Noveo
 
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Noveo
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10Technopark
 
Я ♥ Svg — Владимир Кузнецов, Engine6
Я ♥ Svg — Владимир Кузнецов, Engine6Я ♥ Svg — Владимир Кузнецов, Engine6
Я ♥ Svg — Владимир Кузнецов, Engine6Yandex
 
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftwareКак сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftwareYandex
 
Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"Yandex
 
Блоки как элементы макета сайта
Блоки как элементы макета сайтаБлоки как элементы макета сайта
Блоки как элементы макета сайтаSergei Dubrov
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10Technopark
 
Лекция 4 Client-side
Лекция 4 Client-sideЛекция 4 Client-side
Лекция 4 Client-sideTechnosphere1
 
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтендаСтажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда7bits
 
CodeFest 2013. Родионов А. — От Selenium к Watir — путь к просветлению
CodeFest 2013. Родионов А. — От Selenium к Watir — путь к просветлениюCodeFest 2013. Родионов А. — От Selenium к Watir — путь к просветлению
CodeFest 2013. Родионов А. — От Selenium к Watir — путь к просветлениюCodeFest
 
Sergey Chikuyonok Css Animation
Sergey Chikuyonok  Css AnimationSergey Chikuyonok  Css Animation
Sergey Chikuyonok Css Animationrit2010
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
 

Similar to аккордеон (20)

Web осень 2013 лекция 4
Web осень 2013 лекция 4Web осень 2013 лекция 4
Web осень 2013 лекция 4
 
04 - Web-технологии. CSS - язык описания стилей
04 - Web-технологии. CSS - язык описания стилей04 - Web-технологии. CSS - язык описания стилей
04 - Web-технологии. CSS - язык описания стилей
 
Кроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети ЯндексаКроссбраузерные решения в рекламной сети Яндекса
Кроссбраузерные решения в рекламной сети Яндекса
 
KnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-ОнлайнKnockoutJS на примере 2ГИС-Онлайн
KnockoutJS на примере 2ГИС-Онлайн
 
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин ИльяDUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
 
стальканат
стальканатстальканат
стальканат
 
Box model, display and position (HTML5 тема 07 - box model, display position)
Box model, display and position (HTML5 тема 07 - box model, display position)Box model, display and position (HTML5 тема 07 - box model, display position)
Box model, display and position (HTML5 тема 07 - box model, display position)
 
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)
 
Web осень 2012 лекция 10
Web осень 2012 лекция 10Web осень 2012 лекция 10
Web осень 2012 лекция 10
 
Я ♥ Svg — Владимир Кузнецов, Engine6
Я ♥ Svg — Владимир Кузнецов, Engine6Я ♥ Svg — Владимир Кузнецов, Engine6
Я ♥ Svg — Владимир Кузнецов, Engine6
 
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftwareКак сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
 
Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"
 
Блоки как элементы макета сайта
Блоки как элементы макета сайтаБлоки как элементы макета сайта
Блоки как элементы макета сайта
 
Web весна 2013 лекция 10
Web весна 2013 лекция 10Web весна 2013 лекция 10
Web весна 2013 лекция 10
 
Лекция 4 Client-side
Лекция 4 Client-sideЛекция 4 Client-side
Лекция 4 Client-side
 
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтендаСтажировка-2015. Разработка. Занятие 13. Сборка фронтенда
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
 
CodeFest 2013. Родионов А. — От Selenium к Watir — путь к просветлению
CodeFest 2013. Родионов А. — От Selenium к Watir — путь к просветлениюCodeFest 2013. Родионов А. — От Selenium к Watir — путь к просветлению
CodeFest 2013. Родионов А. — От Selenium к Watir — путь к просветлению
 
Wordpress theme
Wordpress themeWordpress theme
Wordpress theme
 
Sergey Chikuyonok Css Animation
Sergey Chikuyonok  Css AnimationSergey Chikuyonok  Css Animation
Sergey Chikuyonok Css Animation
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
 

аккордеон

  • 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');