Аккордеон HTML шаблоны

Шаблоны веб-сайтов Accordion

Шаблоны веб-сайтов Accordion аналогичны настраиваемым шаблонам, созданным с помощью Bootstrap 4. Шаблон веб-сайта «аккордеон», разработанный Nicepage в 2021 году, имеет множество складных групповых элементов, которые можно использовать для адаптивной темы WordPress портфолио. Любые независимые веб-дизайнеры могут использовать чистый и забавный анимированный аккордеон CSS, чтобы сделать бесплатные веб-сайты HTML5 CSS3 jquery живыми и интерактивными. Бесплатные шаблоны Bootstrap используют веб-дизайн, видеоресурсы из бесплатных видеоматериалов и шаблоны звуковых эффектов, чтобы легко настраивать дизайн веб-сайтов. Шикарный маленький список аккордеонов отлично подходит для дизайна пользовательского интерфейса галереи аккордеонов, чтобы сделать его переменным без необходимости использования только элемента аккордеона HTML. Как и бесплатный Bootstrap 4, шаблон веб-сайта личного портфолио HTML5 с одностраничной темой — отличный инструмент для любого веб-разработчика, веб-дизайнера и графического дизайнера.

Если вам нужно создать действительно уникальный графический дизайн для своих специализированных страниц, используйте слайдер-гармошку CSS3 и адаптивный HTML-шаблон целевой страницы. CSS-адаптивный анимированный аккордеон SCSS включает в себя различные веб-элементы аккордеона HTML, такие как вертикальные аккордеоны, горизонтальные аккордеоны, конструктор логотипа недвижимости или плоский аккордеон, адаптивный CSS-анимированный аккордеон. В нашем простом меню-гармошке используется горизонтальный трехмерный аккордеон на чистом CSS, чтобы не перегружать целевую страницу бесплатных шаблонов веб-сайтов и ее мобильную версию. Вы можете загружать любую информацию на чистый CSS. Расширяющийся горизонтальный аккордеон превратит простое выпадающее меню в лучший дизайн интерьера веб-сайта. Вкладки аккордеона в чистом виде SCSS и вертикальные вкладки аккордеона точно интегрированы в систему веб-сайта, поэтому вы можете применять галерею изображений аккордеона, аккордеон с vanilla js или сворачивающийся шаблон аккордеона в чистом HTML5 и CSS3. Лучшим примером одностраничного простого плагина аккордеона, подобного шаблону плагина jQuery accordion, является таблица цен на популярные товары или услуги.

Другой пример шаблонов веб-сайтов бизнес-портфолио — это контактная форма со списком отделов и их контактной информацией на вкладках-гармошках. Вертикальное меню с изображением аккордеона должно содержать кнопки «оставить новый ответ» и «отменить ответ» в веселых адаптивных шаблонах веб-сайтов на чистом CSS. Социальные сети будут внимательно следить за пользовательским интерфейсом вашего адаптивного шаблона аккордеона, поэтому обязательно используйте бесплатные шаблоны веб-сайтов CSS аккордеона, похожие на бесплатный простой аналогичный аккордеон jquery или горизонтальный аккордеон на чистом CSS. У бесплатных конструкторов адаптивных веб-сайтов WordPress есть часто задаваемые вопросы, созданный для ознакомления с чистым CSS и бесплатным шаблоном адаптивного веб-сайта HTML5. Вы можете легко использовать бесплатный одностраничный аккордеон HTML5, созданный для популярных элементов в любой теме WordPress. Мы предоставляем неограниченное количество загрузок бесплатных бизнес-тем WordPress HTML5 и настраиваемых административных шаблонов HTML CSS javascript. Плагины WordPress в бизнес-шаблоне темы WordPress объединяют и исследуют популярные категории и бесплатную загрузку 4 популярных элементов, для которых не требуется Adobe Photoshop. Горизонтальный аккордеон и вертикальный аккордеон на целевых страницах Unbounce создадут сворачивающееся портфолио аккордеона на чистом CSS для бизнес-шаблона с дополнительным аккордеоном CSS HTML only. В наших шаблонах целевых страниц и шаблонах сайтов с темами WordPress для портфолио используются бесплатные шаблоны анимированного плагина «аккордеон» для оптимизации вашей веб-разработки.

Создаем симпатичный аккордеон при помощи CSS3

Сегодня мы узнаем, как создать симпатичный аккордеон на  чистом CSS3. Данный пример основан на Futurico UI Pro от Владимира Кудинова. Он будет работать во всех браузерах и устройствах, которые поддерживают селектор :target.

Шаг 1 — Основная HTML-разметка

Давайте создадим три div-а с разными ID, где каждый div будет иметь связь с классом вкладки, и div с классом content.

Для того чтобы аккордеон открывался, когда мы нажимаем на него, мы должны использовать селектор :target. Селектор :target будет работать только если у нас будет ссылка, которая указывает на идентификатор, и когда мы нажмем на эту ссылку, id становится ссылкой на элемент.

<div>
 <div>
 <a href=»#tab-1″>Option One</a>
 <div>
 Content Here
 </div>
 </div>
 <div>
 <a href=»#tab-2″>Option Two</a>
 <div>
 Content Here
 </div>
 </div>
 <div>
 <a href=»#tab-3″>Option Three</a>
 <div>
 Content Here
 </div>
 </div>
</div>

Шаг 2 — Основные стили аккордеона

Мы начнем с добавления некоторых reset-стилей, чтобы удалить все поля, отступы и границы, которые устанавливают браузеры.

.accordion,.accordion div,.accordion h2,.accordion p,.accordion a,.accordion img,.accordion span,.accordion em,.accordion ul,.accordion li {

 margin: 0;
 padding: 0;
 border: none;
}

Затем мы зададим фиксированную ширину равную 300px (290px + 5px левый отступ + правый padding 5px), цвет фона, закругленные углы и тени.

.accordion {
 width: 290px;
 padding: 1px 5px 5px 5px;
 background: #141517;

 -webkit-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
 -moz-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
 box-shadow: 0px 1px 0px rgba(255,255,255, .05);

 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

Шаг 3 — Стили для заголовка вкладки

Теперь давайте зададим стили для заголовка вкладки, по умолчанию, с некоторыми CSS3 градиентами, тенями, закругленными углами и некоторыми базовами свойствами CSS (шрифт, отступы, цвета и т.д.).

.accordion .tab {
 display: block;
 height: 35px;
 margin-top: 4px;
 padding-left: 20px;
 font: bold 12px/35px Arial, sans-serif;
 text-decoration: none;
 color: #eee;

 text-shadow: 1px 1px 0px rgba(0,0,0, .2);

 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;

 background: #6c6e74;
 background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));

 background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
 background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
 background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
 background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

 -webkit-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
 -moz-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
 box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
}

Затем нам нужно добавить стили для hover и active. Мы изменим текст и цвета градиент на зеленый.

.accordion .tab:hover,
.accordion div:target .tab {
 color: #2b3b06;

 text-shadow: 0px 1px 0px rgba(255,255,255, .15);

 background: #a5cd4e;
 background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
 background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);

 -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
 -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);

 box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
}

Шаг 4 — Показываем и скрываем содержимое

Вначале мы будем скрывать все содержание и показывать его только тогда, когда вы нажимаете на вкладку. Чтобы скрыть его мы будем использовать свойство display:none и display:block; для открытого блока. Мы также добавим анимацию при раскрытии, чтобы он выглядел лучше, и высоту 100px для открытого блока.

.accordion div .content {
 display: none;
 margin: 5px 0;
}

.accordion div:target .content {
 display: block;
}

.accordion > div {
 height: 40px;
 overflow: hidden;

 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
}

.accordion > div:target {
 height: 100px;
}

Шаг 5 — Содержимое вкладки

HTML-разметка

Давайте добавим содержание во вкладки. Мы будем создавать превью поста блога с названием, текстом, некоторыми изображениями и другой информацией. Вы можете изменить разметку, как вам нравится, это не обязательно, просто чтобы сделать этот аккордеон более полным.

<div>
 <img src=»img/post-img-1.png» alt=»»>
 <h2>The Big Elephant in the City</h2>

 <span>5 days ago</span> <em></em> <span>17 comments</span>
 <p>Known locally as «SoMa», this neighborhood was home to the dot.com boom and boasts cutting-edge restaurants and boutiques.</p>
 <ul>
 <li><img src=»img/thumb-1.png» alt=»»></li>
 <li><img src=»img/thumb-2.png» alt=»»></li>
 <li><img src=»img/thumb-3.png» alt=»»></li>
 </ul>
</div>

CSS

Стили самые простые и мы не будем останавливаться подробно на их описании.

.accordion .content h2 {
 color: white;
 font: 18px/32px Arial, sans-serif;
}

.accordion .content p {
 margin: 10px 0;
 color: white;
 font: 11px/16px Arial, sans-serif;
}

.accordion .content span {
 font: italic 11px/12px Georgia, Arial, sans-serif;
 color: #4f4f4f;
}

.accordion .content em.bullet {
 width: 5px;
 height: 5px;
 margin: 0 5px;
 background: #6b8f1a;
 display: inline-block;

 -webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
 -moz-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
 box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.accordion .content ul li {
 list-style: none;
 float: left;
 margin: 5px 10px 5px 0;
}

.accordion .content img {
 -webkit-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
 -moz-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
 box-shadow: 2px 2px 6px rgba(0,0,0, .5);
}

Изменим высоту div-а на 360px.

.accordion > div:target {
 height: 360px;
}

Заключение

Вот и всё! Надеюсь, вам понравилось.

Демонстрация

Перевод статьи с designmodo.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Аккордеон СЛАЙДЕР на CSS / HTML за 8 минут

В данном уроке разберем аккордеон СЛАЙДЕР на чистом CSS. Наводя на картинку, она раскрывается, а предыдущая сжимается. Ко всему этому блок у нас резиновый, сжимая и растягивая он центруется на страничке, что дает его простату внедрения на любой сайт.

See the Pen yPRJmr by Denis (@Dwstroy) on CodePen.

В уроке задействуем:

• display: flex;
• используем transition;
• и скроем картинки за пределами блока при помощи overflow:hidden;

HTML структура Аккордеон СЛАЙДЕР

Делаем основной каркас, где будет размещаться картинки. Как всегда к уроку прилагаю архив с текущими данными. Скачиваете к себе, переносите в среду разработки, открываем Index файл и приступаем к описанию каркаса.

Создаем блок DIV с классом .dws-wrapper, который будет являться нашей оберткой. В нутрии его размещаем UL с классом .accordion, далее списки LI в количестве 7 штук и в нутрии них располагаем картинки.

div.dws-wrapper>ul.accordion>li*7>img[src=img/bg1.jpg]   

Прописываем путь к разным картинкам, как видим, они отобразились на страничке и теперь можно переходить к описанию стилей.

CSS стили

Открываем styles.css, верхней строкой задает задний фон к странице. Cделаем отступ, и разберем, какие есть варианты реализации данного аккордеона. Как вариант можно отфлотить списки LI, но не всегда такой вариант нам подойдет. Давайте лучше покажу на примере по чему. 

Для этого отбираем ul.accordion li и пропишем им float:left;, зададим ширину в 80px, и при помощи overflow: hidden; скроем все лишнее. Данный способ хорош если страничка фиксированной ширины или адаптированная медиа запросами, так как если сейчас будем ее сжимать, то блоки с картинками будут съезжать в низ. 

ul.accordion li{
 float:left;
 width: 80px;
 overflow: hidden;
}

Для того что бы это избежать можно задать фиксированную ширину блоку UL в 600пик.

ul.accordion {
 width: 600px;
}    

Теперь списки у нас  не съезжают, но и появляется полоса прокрутки. Можно конечно этого избежать при помощи дополнительного описания кода, но зачем ломать голову и утруждать себя лишней писаниной, когда у нас есть замечательное свойство display: flex;.

Удалим все и напишем повторно с помощью этого свойства.

Для начала присвоим обертке максимальный размер в 650 пик. и отцентруем блок по середине.

.dws-wrapper {
 max-width: 650px;
 margin: 0 auto;
}    

Затем в место ширины которую мы до этого задавали блоку UL пропишем display: flex;.

Спискам LI устанавливаем ширину в свернутом виде width: 50px; и скрываем элементы, которые выходят за пределы блока при помощи overflow: hidden; . Теперь сжимая экран, они у нас ужимаются и растягиваются. Списки стали резиновыми, и теперь отцентруем их посередине экрана при помощи justify-content: center; , а сверху сделаем небольшой отступ и уберем padding в ноль.

ul.accordion{
 display: flex;
 justify-content: center;
 margin-top: 150px;
 padding: 0;
}    

Установим ширину картинок в 300 пик.

ul.accordion img{
 width: 300px;
}    

Перейдем к спискам, и пропишем им стили.

Зададим отступы padding: 1px 1px 0;, при наведении отобразим курсор cursor:pointer;, сделаем списки блочными элементами display:block; и добавим тени при помощи box-shadow:1px 3px 15px #7e807e;.

ul.accordion li{
width: 50px;
overflow: hidden;
padding: 1px 1px 0;
cursor:pointer;
display:block;
-moz-box-shadow:1px 3px 15px #7e807e;
-webkit-box-shadow:1px 3px 15px #7e807e;
box-shadow:1px 3px 15px #7e807e;
 }    

Анимируем отображение блоков

Далее опишем стили при наведении, для этого устанавливаем ширину картинки в 300 пик., изменяем тень. Задаем, анимирование растяжения при помощи transition в  одну секунду.

ul.accordion li:hover{
 width:300px;
 -moz-box-shadow:1px 3px 15px #36c5fa;
 -webkit-box-shadow:1px 3px 15px #36c5fa;
 box-shadow:1px 5px 15px #36c5fa;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -ms-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}    

Что бы не схлопывалась картинка, когда убираем курсор, присвоим списку transition, но теперь зададим продолжительность в 1.5 секунды, что бы картинка сживалась немного медленнее.

ul.accordion li{
width: 50px;
overflow: hidden;
padding: 1px 1px 0;
cursor:pointer;
display:block;
-moz-box-shadow:1px 3px 15px #7e807e;
-webkit-box-shadow:1px 3px 15px #7e807e;
box-shadow:1px 3px 15px #7e807e;
 -webkit-transition: all 1.5s;
 -moz-transition: all 1.5s;
 -ms-transition: all 1.5s;
 -o-transition: all 1.5s;
 transition: all 1.5s;
}    

Зафиксируем в развернутом состоянии изображение посередине, для этого отбираем центральный элемент списка при помощи :nth-child(4) и назначаем ему ширину в 300 пик.

ul.accordion li:nth-child(4){
 width: 300px;
}    

Далее нужно сделать так, что бы при наведении на другие элементы, данная картинка сворачивалась. Для этого просто указываем текущему списку при наведении 50 пик.

ul.accordion:hover li:nth-child(4){
 width: 50px;
}   

И за тем, нужно полностью разворачивать центральную картинку если она была свернутой при наведении на нее. Отбираем картинку и задаем ей ширину в 300 пик.

ul.accordion li:nth-child(4):hover{
 width:300px;
}    

В принципе и все, получилась довольно простой и симпатичный Аккордеон СЛАЙДЕР на чистом CSS. Как видите код простой, всего несколько строк и мы получаем интересный эффект при наведении. К тому же блоки резиновая и легко вписывается в страничку сайта. 

Кому понравилось видео, пиши комментарий, делитесь видео с друзьями в социальных сетях.

Оставить комментарий:

Бесплатные «аккордеон»-меню с помощью HTML5 и CSS3

HTML — популярный язык, используемый для строительства веб-страниц и другой информации, которая может быть показана в web-браузере. HTML 5 является последним достижением. С другой стороны, CSS — язык, который используется для того, чтобы описать семантику представления на веб-сайтах, это язык разметки стилей; HTML и XML были наиболее используемыми языками. CSS разъединяет содержание самого документа и его представления, включая элементы расположения, цвета и шрифтов. CSS также, как и HTML, появился с различными версиями, и CSS3 является текущей. «Аккордеон»-меню на HTML 5 и CSS 3 используется, чтобы построить дизайн веб-сайтов с хорошей разметкой, комбинацией цвета и идеальной типографией. Аккордеон — многоуровневое меню с фиксированной высотой и шириной. Оно может быть использовано для создания отсека подпунктов главного меню. Вашему вниманию представляются бесплатные «аккордеон»-меню на HTML5 и CSS3, которые могут быть использованы для веб-дизайна и разработки сайтов.

 

Accordion using only CSS

---

Responsive: Tabs to accordion

---

CSS3 Multiple Accordion Menu

---

Accessible Accordion & Toggle

---

RWD Accordion

---

jQuery Accordion custom navigation 

---

CSS3-only accordion

---

Simple Accordion

---

Simple Accordion FAQ List

---

Hover activated accordian with default state

---

Accordion slider

---

Accordion

---

Simple accordion for news

---

CSS Based Animated Accordion

---

Fading List

---

Content Accordion in Pure CSS3

---

Accordion without Javascript

---

CSS3 Accordion

---

Vertical Accordion effect with jQuery

---

Multi level slide accordion menu with jQuery

---

Accordion with CSS3

---

Flexible Slide-to-top Accordion

---

Vertical Sliding Accordion with jQuery

---

Elegant Accordion with jQuery and CSS3

---

Accordion Menu

---

 

Перевод — Дежурка.

Автор — Unaiz.

Возможно, вам будет интересно: Прозрачные ui-элементы бесплатно. 

Создаем аккордеон на WordPress без плагинов и скриптов на HTML+CSS

Всем привет. Сегодня я начинаю серию статей (она будет состоять только из 2), в которых мы рассмотрим, как можно получить короткую ссылку на Вашу статью WordPress. Вы в курсе, что если установить ЧПУ в WordPress, то ссылки на каждую статью будут огромными (не на все, но будут). Некоторые пользователи, например, хотят разместить ссылку на Вашу статью, у себя на сайте, или в твиттер-аккаунте, но когда копируют, получается слишком длинная. Но это не беда, WordPress предоставляет нам возможность получить короткие ссылки для каждой статьи, даже если у нас активированы ЧПУ.

Вы поняли мою задумку: я хочу, чтобы в каждой статье, автоматически добавлялась короткая ссылка к статье. Есть множество сервисов, которые укорачивают ссылки, но зачем использовать их, если WordPress сам предоставляет такую возможность.

Начнем мы с того, что создадим аккордеон в WordPress, а точнее в каждой статье, будет он выглядеть у меня следующим образом:

После каждой статьи у меня будет вот такой аккордеон. Я еще раньше писал про WidgetKit+Wordpress, там рассказывал, что можно делать красивые аккордеоны в WordPress в ручном режиме, но сегодня не об этом, сегодня мы создадим аккордеон вручную, при помощи HTML и CSS, поэтому ничего лишнего.

Мой аккордеон работает следующим образом: раскрывается только при наведении мыши, а не нажатию по нему. Для того чтобы вставить его в каждую статью (чтобы он появлялся для каждой статьи), то Вам необходимо скопировать файл single.php, который отвечает за вывод каждой статьи. Да, но для начала Вам необходимо создать стили для нашего аккордеона, поэтому копируем файл style.css и в середине его вставляем следующий код:

#container {
    width: 600px;
    margin: 20px auto;
}
#accordion .item {
    width: 100%;
    height: 30px;
    overflow: hidden;
 
    transition: height ease-in-out 500ms;
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
 
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
 
    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;
 
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 30px;
    padding: 5px;
}
#accordion div:hover {
    height: 90px;
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
 
/* Радиус скругления углов первой секции */
#intro {
    border-radius: 2px 2px 0 0;
}
 
/* Радиус скругления углов последней секции */
#contact {
    border-radius: 0 0 3px 3px;
}
#contact:target {
    border-radius: 0;
}
 
/* Высоты секций */
#intro:target + p {
    height: 70px;
}
#info:target + p {
    height: 200px;
}
#contact:target + p {
    height: 167px;
}

После этого можно приступать к выводу самого аккордеона, для этого открываем файл single.php и в том месте, где Вы хотите его выводить необходимо добавить следующий код:

<divid="container">
  <divid="accordion">
    <divclass="item">
      <ahref="#">Получить короткую ссылку статьи</a>
      <p>
		Скоро все будет
      </p>
    </div>
  </div>
</div>

Сколько Вам полей необходимо, столько Вы и добавляете у себя, ну а теперь просто можете протестировать его у меня на сайте, в каждой статье. Вот и все, теперь Вы в курсе как создать аккордеон для WordPress без плагинов  и скриптов на чистом HTML+CSS. В следующей статье мы рассмотрим, как можно прикрутить короткую ссылку к аккордеону. Причем такой аккордеон Вы можете использовать не только для данных целей, но и для вывода любой другой информации в каждой статьи, я его решил использовать именно так.

Также советуем почитать на PressDev.RU

Супер аккордеон HTML CSS3 плагин WordPress Accordion — info-effect.ru

Привет! Сегодня я покажу вам Супер полезный плагин WordPress! Вы сможете очень просто и быстро создавать Стильные аккордеоны. Можно создать один спойлер, а можно создать связку спойлеров, это и есть аккордеон. Внутрь спойлера можно добавлять любой контент с помощью визуального редактора WordPress. Можно настроить внешний вид аккордеона, выбрать цвета, размер и т.д. Есть 5 готовых стилей. Очень простой и полезный плагин!

 

---

---

---

---

---

 

Установить плагин Accordion вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, установите и активируйте найденный плагин.

 

 

Далее, после установки и активации плагина, перейдите на страницу: Accordion. Здесь будут отображаться все созданные аккордеоны. Чтобы создать новый, нажмите вверху на кнопку Add New Accordion.

 

 

Далее, на странице создания укажите название нового аккордеона. Чтобы добавить спойлер в аккордеон, нажмите на кнопку Add New Item. В настройках вы можете:

 

 — Accordion Themes, можно выбрать готовый стиль.

 — Title BG Color, цвет фона спойлера.

 — Title Font Color, цвет заголовка спойлера.

 — Title Font Size, размер заголовка.

 — Content BG Color, цвет фона содержания.

 — Content Font Color, цвет текста содержания.

 — Content Font Size, размер текста содержания.

 — Content Padding, размер отступа.

— Сохраните настройки.

 

 

Далее, внутрь каждого спойлера вы можете добавить любой контент, текст, фото, видео, форму и т.д. Для каждого спойлера укажите свой заголовок. Чтобы создать несколько вкладок внутри аккордеона, жмите на кнопку Add New Item.

 

 

Нажмите на вкладку SHORTCODE, чтобы скопировать шорткод или php код для вставки аккордеона на страницу, запись, виджет или php файлы темы.

 

 

Самый простой вариант, вставить шорткод в содержание записи или страницы.

 

 

Всё готово! На сайте будет отображаться готовый аккордеон, как показано на скриншотах в начале записи!

 

 — Супер плагины WordPress, более 500, смотри Здесь!

 

Остались вопросы? Напиши комментарий! Удачи!

 

%d0%b0%d0%ba%d0%ba%d0%be%d1%80%d0%b4%d0%b5%d0%be%d0%bd — English translation – Linguee

Организация обеспечила подготовку сотрудников и предоставила оборудование для укрепления базы четырех общинных радиостанций в […] Карибском бассейне («Roоts FM», Ямайка; «Radio […] Paiwomak», Гайана; «Radio em ba Mango», Доминика; «Radio […] Muye», Суринам). unesdoc.unesco.org	The Organization also provided training and equipment to reinforce the capacity of four community radio […] stations in the Caribbean (Roots FM, Jamaica; Radio Paiwomak, Guyana; […] Radio em ba Mango, Dominica; and Radio Muye, […] Suriname). unesdoc.unesco.org
RFLQ_S007BA Расчет ликвидности: […] перенести фактические данные в нов. бизнес-сферу . enjoyops.de enjoyops.de	RFLQ_S007BA Liquidity Calculation: […] Transfer Actual Data to New Business Area . enjoyops.de enjoyops.de
RM06BA00 Просмотр списка заявок . enjoyops.de enjoyops.de	RM06BA00 List Display of Purchase Requisitions . enjoyops.de enjoyops.de
Еще одним из популярных туристических мест в 2010 […] году будет, согласно BA, Стамбул в Турции. tourism-review.ru	Among other popular destinations for 2010 will be, […] according to the BA, Istanbul in Turkey. tourism-review.com
Эта опция меню будет доступна после установки CD/DVD/BD—ROM-привода в NMT, или при подключении внешнего USB-привода CD/DVD/BD—ROM. popcornhour.es	This option will only be accessible when a CD/DVD/BD-ROM drive has been installed into or attached to your NMT. popcornhour.es
BD выпускается в строгом соответствии с техническими условиями, все аудио могут быть расшифрованы вывода см. в разделе BD RIP, BD ISO треков были совершенны следующего поколения выходе источника macbook-covers.net	BD produced in strict accordance with specifications, all the audio can be decoded output, see BD RIP, BD ISO tracks were perfect the next generation of source output macbook-covers.net
Компания также поставляет систему шасси для первого в мире гражданского конвертоплана «Tiltrotor» […] […] (воздушного судна, оснащённого поворотными несущими винтами): Messier-Bugatti-Dowty поставляет оборудование для BA609 фирмы Bell/Agusta Aerospace, летательного аппарата, сочетающего в себе скорость и дальность самолёта с маневренностью […] […] вертикально взлетающего вертолёта. safran.ru	It also supplies the landing gear for the Bell/Agusta Aerospace BA609, the world’s first civilian tilt-rotor aircraft, combining the flexibility of vertical flight with the speed and range of a conventional aircraft. safran.ru
Рейтинг финансовой устойчивости […] «D-» (что отображает Ba3 по BCA оценке) присвоен […] Ардшининвестбанку как одному из крупнейших […] банков Армении (будучи вторым банком в Армении по величине активов с долей рынка в 12,2% в 2007 году, Ардшининвестбанк в марте 2008 года стал лидером по этому показателю), широкой филиальной сетью, хорошими финансовыми показателями, особенно – растущей рентабельностью, высокой капитализацией и показателями эффективности выше среднего в контексте армянского рынка. ashib.am	According to Moody’s, ASHIB’s «D-» BFSR — which maps to a Baseline […] Credit Assessment of Ba3 – derives from its […] good franchise as one of Armenia’s largest […] banks (ranking second in terms of assets with a 12.2% market share as at YE2007 — reportedly moving up to first place by March 2008) and good financial metrics, particularly, buoyant profitability, solid capitalisation and above-average efficiency ratios, within the Armenian context. ashib.am
В январе 2009 года, в рамках ежегодного пересмотра кредитных рейтингов, рейтинговой агентство Moody’s […] подтвердило […] присвоенный в 2007 году международный кредитный рейтинг на уровне Ba3 / Прогноз «Стабильный» и рейтинг по национальной шкале […] Aa3.ru, что свидетельствует […] о стабильном финансовом положении ОГК-1. ogk1.com	In January 2009 as part of annual revising of credit ratings, the international rating agency Moody’s […] confirmed the international […] credit rating at the level Ba3 with Stable outlook attributed in 2007 and the national scale rating Aa3.ru, which is […] an evidence of OGK-1’s stable financial position. ogk1.com
На устройствах РПН с числом переключений более чем 15.000 в год мы […] рекомендуем применять маслофильтровальную установку OF100 (инструкция по […] эксплуатации BA 018) с бумажными […] сменными фильтрами. highvolt.de	If the number of on-load tap-changer operations per year […] is 15,000 or higher, we recommend the use of […] our stationary oil filter unit OF […] 100 with a paper filter insert (see Operating Instructions BA 018). highvolt.de
В нашем […] каталоге Вы найдете описание всех преимуществ, технических характеристик и номера деталей соединений SPH/BA. staubli.com	Discover all the advantages, technical features and part numbers of the SPH/BA couplings in our catalog. staubli.com
Запросы и бронирования, связанные с Вознаграждениями (включая Вознаграждения от Компаний-партнеров) можно сделать на сайте ba.com или в местном сервисном центре Участника в соответствии с процедурой оформления Вознаграждений, которая может время от времени быть в силе, как указано на сайте ba.com. britishairways.com	Requests and bookings relating to Rewards (including Service Partner Rewards) may be made online at ba.com or through the Member’s local service centre in accordance with such procedures that may be in force from time to time for the issue of Rewards, as set out on ba.com. britishairways.com
Быстроразъемные […] соединения SPH/BA с защитой от […] утечек при разъединении и быстроразъемные полнопоточные соединения DMR для […] систем охлаждения: масляных систем и систем вода/гликоль. staubli.com	SPH/BA clean break and DMR full […] flow quick release couplings for cooling applications such as oil and water glycol connections. staubli.com

Как сделать чистый HTML и CSS аккордеон [JAVASCRIPT НЕ ТРЕБУЕТСЯ]

Если вы действительно увлечены веб-производительностью и не очень любите JavaScript, то вы пришли к правильному руководству.

Как опытный веб-разработчик в Форт-Уэрте и Далласе, штат Техас, я лично увлечен созданием сверхбыстрых и минималистичных веб-сайтов.

Вот почему здесь я собираюсь показать вам, как создать аккордеон на чистом CSS без JavaScript.

Не тратьте время зря

Прежде чем продолжить и чтобы вы не теряли время зря, проверьте демонстрацию ниже, чтобы вы могли быть уверены, что это именно то, что вам нужно

.

ДЕМО: CSS Accordion № JS. (открывается в новом окне)

Если это то, что вы хотите, то приступим.

ПРИМЕЧАНИЕ. Если вы хотите добавить анимацию CSS3, стрелки, знаки «плюс» и «минус», ознакомьтесь с другими руководствами в конце этой статьи.

Также, прежде чем продолжить, пожалуйста, не забудьте проверить эту коллекцию аккордеонов на чистом CSS

Вы найдете там более 18 демонстраций, чтобы получить больше вдохновения с вашими аккордеонами на чистом CSS.

Я не собираюсь вдаваться в технические подробности, потому что это просто.

Однако, если вы знаете HTML и CSS, будет намного лучше.

Начнем с базовой базы HTML5.

Ваша база HTML5

Пример № 1

Ваш первый аккордеон

Теперь давайте создадим нашу начальную разметку HTML для первого аккордеона.

Здесь мы будем использовать следующие HTML-теги:

<вход>
<метка>



 

Пример № 2

Из примера № 3 ниже посмотрите, как внутри HTML-тега «input» я буду использовать атрибут «type» со значением «checkbox» и атрибут «id» со значением «title1».

Затем внутри тега «label» я буду использовать атрибут «for» со значением «title1».

ВНИМАНИЕ: как атрибуты «id» и «for» будут иметь одинаковое значение «title1».

Это действительно важно помнить, если вы планируете иметь более одного аккордеона.

И, наконец, посмотрите внутри тега «div», как я собираюсь использовать атрибут «class» со значением «content».

См. Ниже.

 Один аккордеон 


 Здесь размещается ваш контент. 


 

Образец № 3

Дублирование аккордеона

Теперь давайте продублируем этот аккордеон и создадим еще два.

Второй аккордеон.

 Две гармошки 


 Здесь размещается ваш контент. 


 

Образец № 4

Третий аккордеон.

 Три аккордеона 


 Здесь размещается ваш контент. 


 

Пример № 5

Изменение значений внутри атрибутов «id» и «для»

Теперь убедитесь, что каждый раз при создании нового аккордеона.

Значения внутри атрибутов «id» и «for» всегда совпадают и изменяются соответственно.

В этом случае обратите внимание, что мой первый аккордеон имеет значение «title1», второй аккордеон имеет значение «title2», а третий аккордеон имеет значение «title3».

Значения аккордеона всегда будут одинаковыми внутри атрибутов «id» и «for», но они всегда будут разными внутри каждого нового созданного вами аккордеона.

Давайте теперь посмотрим, как наша полная разметка HTML выглядит вместе для всех трех аккордеонов.

Полная и окончательная разметка HTML

 Один аккордеон 


 Ваш контент находится внутри этого раздела с классом "content". 



 Две гармошки 


 Ваш контент попадает сюда внутри этого раздела с классом "content".



 Три аккордеона 


 Ваш контент находится внутри этого раздела с классом "content". 






 

Пример № 6

Заключительные касания CSS

Теперь, когда мы закончили HTML-скелет наших аккордеонов, пора украсить все это с помощью CSS.

Здесь мы будем стилизовать только тег «label», тег «div» с классом «content», а в конце мы будем использовать псевдокласс «: checked» для создания интерактивного действия для отображения и скрытия содержимого. .

Скрытие флажка ввода

Сначала давайте начнем со скрытия тега «input», поскольку он нам не нужен.

Вход {
    дисплей: нет;
}

 

Пример № 7

Стили CSS для тега метки

Теперь давайте стилизуем метку.

метка {
    дисплей: блок;
    отступ: 8px 22px;
    маржа: 0 0 1px 0;
    курсор: указатель;
    фон: # 6AAB95;
    радиус границы: 3 пикселя;
    цвет: #FFF;
    переход: легкость .5s;
}

label: hover {
    фон: # 4E8774;
}

 

Пример № 8

Стили CSS для тега div с классом содержимого

Затем зададим стиль тега «div».

.содержание {
    фон: # E2E5F6;
    отступ: 10 пикселей 25 пикселей;
    граница: 1px solid # A7A7A7;
    маржа: 0 0 1px 0;
    радиус границы: 3 пикселя;
}

 

Пример № 9

Стили CSS для скрытия и отображения содержимого

И, наконец, давайте добавим псевдокласс для отображения и скрытия содержимого.

input + label + .content {
    дисплей: нет;
}

input: checked + label + .content {
    дисплей: блок;
}

 

Пример № 10

Полные стили CSS вместе

И вот он, все вместе.

Вход {
    дисплей: нет;
}

метка {
    дисплей: блок;
    отступ: 8px 22px;
    маржа: 0 0 1px 0;
    курсор: указатель;
    фон: # 6AAB95;
    радиус границы: 3 пикселя;
    цвет: #FFF;
    переход: легкость.5 с;
}

label: hover {
    фон: # 4E8774;
}

.содержание {
    фон: # E2E5F6;
    отступ: 10 пикселей 25 пикселей;
    граница: 1px solid # A7A7A7;
    маржа: 0 0 1px 0;
    радиус границы: 3 пикселя;
}

input + label + .content {
    дисплей: нет;
}

input: checked + label + .content {
    дисплей: блок;
}

 

Пример № 11

Окончательные стили HTML и CSS вместе

<стиль>

Вход {
    дисплей: нет;
}

метка {
    дисплей: блок;
    отступ: 8px 22px;
    маржа: 0 0 1px 0;
    курсор: указатель;
    фон: # 6AAB95;
    радиус границы: 3 пикселя;
    цвет: #FFF;
    переход: легкость.5 с;
}

label: hover {
    фон: # 4E8774;
}

.содержание {
    фон: # E2E5F6;
    отступ: 10 пикселей 25 пикселей;
    граница: 1px solid # A7A7A7;
    маржа: 0 0 1px 0;
    радиус границы: 3 пикселя;
}

input + label + .content {
    дисплей: нет;
}

input: checked + label + .content {
    дисплей: блок;
}








 Один аккордеон 


 Здесь размещается ваш контент.



 Две гармошки 


 Здесь размещается ваш контент. 



 Три аккордеона 


 Здесь размещается ваш контент. 






 

Sample # 12

Как видите, все это действительно просто.

Создание великих вещей в веб-разработке без использования JavaScript возможно.

Чтобы скачать это произведение, воспользуйтесь ссылкой ниже.

ССЫЛКА: Код загрузки

Если у вас есть комментарии и / или предложения, не забудьте отправить их мне, используя зеленую кнопку ниже.

И, пожалуйста, никогда не забывай, всегда держи его KISS.

KISS = Keep It Simple Stupid

25 бесплатных CSS-аккордеонов — вкладки и меню

С легкостью добавляйте CSS-аккордеоны на свой сайт.Навыки кодирования не требуются. Здесь мы выбрали файлы HTML, CSS, которые грамотно закодированы с чистой структурой и гибким дизайном. Просто скопируйте HTML-код в HTML-файл и CSS-код в таблицу стилей, и все готово. Бесплатно для личных и коммерческих проектов.

Веб-дизайнеры

используют концепцию расширяемых и сворачиваемых списков, чтобы преобразовать большие разделы контента в более удобочитаемые разделы. Наиболее широко используемые дизайны меню-гармошки на современных веб-сайтах:

1. Вертикальные аккордеоны
2. Горизонтальные аккордеоны

Что делают эти аккордеоны CSS? Проще говоря, аккордеоны на веб-сайте просто показывают и скрывают контент.CSS Accordions похожи на закладки; например, на вертикальных гармошках — слева вы помещаете указатель содержания темы, а справа вы читаете содержание этой темы.

Вертикальные аккордеоны

Аккордеон для чистого содержимого CSS

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Нет Требуемый навык: Начинающий

Совершенно простое меню-гармошка с вертикальным сворачиваемым и расширяемым списком.Для этого шаблона css не требуется jquery.

Demo & Download

Плоская гармошка CSS

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемый навык: Начинающий

Demo & Download

Сворачивающийся аккордеон Pure CSS

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Font Awesome Требуемый навык: Начинающий

Скопируйте и вставьте код, и все готово.Это простое меню-гармошка создано с использованием чистого CSS и HTML-кода без Javascript, который бы что-либо запускал.

Demo & Download

SCSS вкладыши гармошки

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Нет Требуемый навык: Начинающий

Demo & Download

FAQ Аккордеон CSS

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Нет Требуемый навык: Начинающий

Аккордеон с часто задаваемыми вопросами для каждого типа веб-сайта, который поможет вашим посетителям взаимодействовать с контентом вашего веб-сайта.Стиль CSS прост и легко интегрируется. Он использует функцию переключателя для расширения списка вкладок.

Demo & Download

Шикарная маленькая список для аккордеона

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Нет Требуемый навык: Начинающий

Это красивый HTML-аккордеон с чистой CSS-анимацией кубической кривой Безье для свертывания / раскрытия списка. Щелкнув меню вкладок, он открывает содержимое и сохраняет его открытым до следующего щелчка.Этот список разворачивания и сворачивания CSS действует как тумблер.

Demo & Download

Только CSS + HTML Элемент аккордеона

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Нет Требуемый навык: Начинающий

Demo & Download

Аккордеон Funky Pure CSS

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Ionicons Требуемый навык: Начинающий

Demo & Download

Аккордеон FAQ

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Ionicons Требуемый навык: Начинающий

Demo & Download

Бесплатный простой sass / jQuery Accordion

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемый навык: Начинающий

Demo & Download

CSS-адаптивный анимированный аккордеон

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемый навык: Начинающий

Demo & Download

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery, Font Awesome Требуемый навык: Начинающий

Demo & Download

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемый навык: Начинающий

Demo & Download

Многоуровневый аккордеон

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемые навыки: Продвинутый

Demo & Download

Простой аккордеон JS

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемый навык: Начинающий

Demo & Download

Аккордеон Vanilla Js

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемые навыки: Продвинутый

Demo & Download

JS Аккордеон

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемые навыки: Продвинутый

Demo & Download

Аккордеон для людей с ограниченными возможностями

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемый навык: Начинающий

Demo & Download

3D аккордеон

Кодирование: HTML / CSS / JS Адаптивный: Да

Зависимости: jQuery Требуемый навык: Начинающий

Demo & Download

Горизонтальные аккордеоны

Вкладки на чистом CSS

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Нет Требуемый навык: Начинающий

Это меню вкладок css может быть легко интегрировано на ваш веб-сайт.Одна из жидких вкладок css без jquery или javascript, которые я нашел сегодня.

Demo & Download

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Нет Требуемый навык: Начинающий

Интересная вкладка меню с добавленными изображениями и значками с дополнительными стилями и интересными для зрителя. Эта загрузка не включает jQuery, поскольку код разработан с использованием чистых элементов CSS и html.

Demo & Download

Горизонтальный аккордеон на чистом CSS бесплатно

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Genericons Требуемый навык: Начинающий

Я решил использовать подход CSS3 и использовать элементы вместо изображений. Я использую шрифт Genericons для значков социальных сетей.

Demo & Download

Bootstrap 4.1 Вкладки и аккордеоны часто задаваемых вопросов

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Bootstrap Требуемый навык: Начинающий

Комбинация вертикальных и горизонтальных стилей для управления контентом или панели администратора.

Demo & Download

Аккордеон из чистого CSS

Кодирование: HTML / CSS Адаптивный: Да

Зависимости: Bootstrap Требуемый навык: Начинающий

Demo & Download

Accessible Accordion — примеры и передовой опыт

Виджеты Accordion требуют некоторых соображений доступности, чтобы сделать их полезными для всех. В этой статье мы объясняем, что вам нужно сделать, чтобы создать доступные, инклюзивные компоненты аккордеона.

Аккордеоны — это распространенный шаблон UX, который может помочь уменьшить объем информации представлен пользователям. Вы можете узнать этот образец по другим именам, например складные разделы, отображение / скрытие содержимого, среди прочего.

Accordions относятся к UX-методике постепенного раскрытия информации (открывается в новой вкладке), которая направлена ​​на удержание внимания пользователя за счет уменьшения беспорядка, путаницы и когнитивной нагрузки. Он работает, только отображая детали раздела при нажатии или щелчке, если это необходимо.

Что касается визуального и интерактивного дизайна, Smashing Magazine опубликовал отличную статья о том, как создать идеальный аккордеон (открывается в новой вкладке).

⛔ Нет Accordion
Длинный контент может ошеломить пользователей.

✅ С Accordion
Страница очищена от беспорядка, поскольку на ней отображается контент только тогда, когда пользователи хотят его прочитать.

Аккордеон — это список элементов, каждый из которых состоит из двух частей: заголовка и панели , как показано на рисунке ниже.

• Заголовок

  Сводка раздела контента, который мы хотим скрыть / показать.Он также служит для контроля видимости содержимого (подсказка: ), то есть интерактивно с мышью и клавиатурой .

  Обычно содержит заголовок, описывающий раздел, и визуальный индикатор состояния видимости элемента «аккордеон».

• Панель

  Раздел контента, который мы хотим показать / скрыть.

  Когда аккордеон закрыт, содержимое внутри панели не должно быть видимым или интерактивным (например,g .: фокусируемые элементы не должны быть фокусируемыми, если они не видны на экране).

Учитывая его преимущества, может возникнуть соблазн использовать аккордеоны, когда это возможно, но часто это может принести больше вреда, чем пользы.

Nielsen Norman Group дает некоторые критерии того, когда использовать аккордеоны, а когда избегать. Короче говоря, , когда все содержимое страницы актуально для пользователей, более выгодно отображать все содержимое сразу, даже если это приводит к увеличению длины страниц.На рабочем столе проще просто прокручивать страницу, чем решать, какие темы нажимать на .

Поскольку HTML изначально не предоставляет элемент аккордеона, нам необходимо реализовать этот виджет с помощью убедитесь, что он доступен для пользователей клавиатуры и программ чтения с экрана.

Это то, что мы рассмотрим дальше. Реализация, которую мы возьмем в качестве примера, взята из «Паттернов проектирования и виджетов» (открывается в новой вкладке) в WAI-ARIA Authoring Practices 1.2 (открывается в новой вкладке).

Элемент	Ключ	Требуется	Действие
Элемент: заголовок		Требуется: ✅	связанное состояние свернутой панели.
Элемент: заголовок	Клавиша: Стрелка вниз	Требуется: ✖️	Перемещает фокус на следующий заголовок аккордеона .
Элемент: заголовок	Клавиша: Стрелка вверх	Требуется: ✖️	Перемещает фокус на предыдущий заголовок аккордеона .
Элемент: заголовок	Ключ: Дом	Требуется: ✖️	Перемещает фокус на первый заголовок аккордеона .
Элемент: заголовок	Ключ: Конец	Требуется: ✖️	Перемещает фокус на последний заголовок аккордеона.

Элемент	Атрибут	Роль	Обязательно	Примечания
Элемент: Кнопка заголовка		Кнопка заголовка		Заголовок каждого заголовка аккордеона находится внутри .
Элемент: заголовок	Атрибут: aria-controls		Требуется: ✖️	Каждая кнопка в заголовке аккордеона связана с соответствующей панелью с помощью aria-controls = ""
Элемент: header	Атрибут: отключен		Обязательно: ✖️	Если панель не может быть свернута (например.g .: должна быть открыта хотя бы одна панель), что указывается с помощью атрибута disabled
Элемент: panel	Атрибут: aria-extended		Требуется: ✅	Каждая аккордеонная панель имеет атрибут ARIA, определяющий ее состояние: Развернуто: aria-extended = "true" Свернуто: aria-extended = "false"
Элемент: панель		регион	Требуется: ✖️	Каждая панель представляет собой и использует соответствующий заголовок аккордеона в качестве своей метки с помощью атрибута aria-labelledby = " «.Это может быть полезно для пользователей программ чтения с экрана, чтобы понять структуру аккордеона. Примечание. В некоторых случаях это не рекомендуется, так как это может привести к огромному количеству ориентиров в районе и . Если у вас более 6 элементов аккордеона, вам следует подумать об использовании вместо этого div .

В соответствии с ожиданиями клавиатуры и ARIA, упомянутыми ниже, полный аккордеон виджет может быть реализован следующим образом:

Lorem ipsum dolor sit amet, conctetur adipiscing elit.Fusce auctor luctus diam, ut lobortis ante pharetra ac. In nec mi odio. Donec scelerisque velit vel iaculis tempor. Fusce Vehicula, neque mollismodo iaculis, risus justo euismod neque, nec conctetur nulla mauris sit amet quam. Vivamus auctor erat in magna euismod aliquam. Ut eros est, posuere sit amet sollicitudin a, vulputate quis metus. Cras mauris nibh, tempor a consquat nec, sagittis quis velit.

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Fusce auctor luctus diam, ut lobortis ante pharetra ac.In nec mi odio. Donec scelerisque velit vel iaculis tempor. Fusce Vehicula, neque mollismodo iaculis, risus justo euismod neque, nec conctetur nulla mauris sit amet quam. Vivamus auctor erat in magna euismod aliquam. Ut eros est, posuere sit amet sollicitudin a, vulputate quis metus. Cras mauris nibh, tempor a consquat nec, sagittis quis velit.

 
 
 
 
  
 
 
  
 aria-extended = "true" 
 
 aria-controls = "accordion-panel-1"> 
 
 Item 1 
 
  
 
  
 
 

aria-labelledby = "accordion-header-1">

Lorem ipsum dolor sit amet ... < / p>

aria-extended = "false"

aria-controls = "accordion-panel-2">

Item 2

aria-labelledby = "accordion-header-2"

скрыто>

Lorem ipsum dolor sit amet. ..

 
 
 
 
  Item 1  
 
  
 
 
 
 
 
 Lorem ipsum dolor sit amet ... 
 
 
 
 
 

 
 
 
 
 
 
 
  Фильтр по бренду  
 
  
 
 
 
 
 
 
 
  
 
  Apple  
 
 
 
 
 
 
 
  
 
 < label for = "motorola"> Motorola  
 
 
 
 
 
 
 
 
 
 

 
 
 
 
  
 
 Item 1 
 
  
 
  
 
 
 
 
 
 Lorem ipsum dolor sit amet ... 
 
 
 
 
 

 
 
 
 
  
 aria-controls = "accordion-panel-1"> 
 
 Item 1 
 
  
 
 < / button> 
 
  
 
 
 
 
 
 Lorem ipsum dolor sit amet ... 
 
 
 
 
 

 
 
 
 
  
 aria-controls = "accordion-panel-1"> 
 
 Item 1 
 
  
 
 < / button> 
 
   
 
 
 
 aria-labelledby = "accordion-header-1"> 
 
 
 Lorem ipsum dolor sit amet... 
 
 
 
 
 

 
 
 
 
  
 aria-controls = "accordion-panel-1" 
 
 aria-extended = "true"> 
 
 Item 1 
 
  
 
  
 
  
 
 
 
 aria-labelledby = "accordion-header-1"> 
 
 
 Lorem ipsum dolor sit amet ... < / p> 
 
 
 
 

 
 
 
 
  
 aria-controls = "accordion-panel-1" 
 
 aria-extended = "false"> 
 
 Item 1 
 
  
 
  
 
  
 
 
 
 aria-labelledby = "accordion-header-1" 
 
 скрыто> 
 
 
 Lorem ipsum dolor sit amet. .. 
 
 
 
 
 

 
 .panel {
 
 max-height: 0; 
 
 переход: макс. Высота 0,5 с, легкость входа; 
 
} 
 
 .panel: not ([aria-hidden = "true"]) {
 
 max-height: 1000px; 
 
} 
 

 
 .panel {
 
 max-height: 0; 
 
 переход: макс. Высота 0,5 с, легкость входа; 
 
} 
 
.панель: not ([aria-hidden = "true"]) {
 
 max-height: 1000 пикселей; 
 
} 
 

 
 const accordionHeaders = document.querySelectorAll ('data-accordion-header'); 
 
 Array.prototype.forEach.call (accordionHeaders, accordionHeader => {
 
 let target = accordionHeader.parentElement.nextElementSibling; 
 
 accordionHeader.onclick = () => {
 
 let extended = accordionHeader.getAttribute ('aria-extended') === 'true' || ложный; 
 
 accordionHeader.setAttribute ('расширенный ария',! Расширенный); 
 
 target.hidden = расширено; 
 
} 
 
}) 
 

 
 
 
 
  
 aria-extended = "false" 
 
 aria-controls = "accordion-panel-1" 
 
 data-accordion-header> 
 
 Элемент 1 
 
  
 
  
 
  
 
 
 
 aria-labelledby = "accordion-header-1" 
 
 скрыто> 
 
 
 Lorem ipsum dolor sit amet. .. 
 
 
 
 
 

 
 import {useState} from 'react'; 
 
 функция AccordionItem ({id, title, children}) {
 
 const [isExpanded, setIsExpanded] = useState (false); 
 
 return (
 
 <> 
 
 
 
 
  
 id = {`$ {id} -header`} 
 
 aria-controls = {` $ {id} -panel`} 
 
 aria -expanded = {isExpanded} 
 
> {title}  
 
  
 
 
 
 id = {`$ {id} -panel`} 
 
 aria-labelledby = {` $ { id} -header`} 
 
 hidden = {! isExpanded} 
 
> 
 
 
  
 
) 
 
} 
 

 
  
 
 
 Lorem ipsum dolor sit amet... 
 
 
  
 

 
  Многие умные люди писали об этом раньше, и их статьи были невероятно полезными. Вы обязательно должны их прочитать. 
 
 Пример Accordion | Практика разработки WAI-ARIA 1.2 
  Пример Accordion | Практика разработки WAI-ARIA 1.2
  
   

    Приведенный ниже пример раздела содержит простую форму ввода личной информации, разделенную на 3 раздела.
    это демонстрирует
    шаблон дизайна для аккордеона.
  
    
    
      
         

          
            
              Персональные данные
              
            
          
         
        
         

          
            
              Платежный адрес
              
            
          
         
        
         

          
            
              адреса доставки
              
            
          
         
        
      
    
    
    
 Поддержка клавиатуры 
 
     
 
 
 
 Ключ 
           
 Функция 
         
 
 
 
 
  Пробел  или  Введите  
           
 Если фокус находится на заголовке «гармошкой» свернутого раздела, этот раздел разворачивается.
         
 
 
  Вкладка  
           

             
 
 Перемещает фокус на следующий фокусируемый элемент. 
               
 Все фокусируемые элементы в аккордеоне включены в последовательность страницы  Вкладка . 
             
 
         
 
 
  Shift + Tab  
           

             
 
 Перемещает фокус на предыдущий фокусируемый элемент. 
               
 Все фокусируемые элементы в аккордеоне включены в последовательность страницы  Вкладка .
             
 
         
 
 
  
 Атрибуты роли, свойства, состояния и табиндекса 
 
    
     
 
 
 
 Роль 
           
 Атрибут 
           
 Элемент 
           
 Использование 
         
 
 
 
 

           

           
  ч4  
           

             
 
 Элемент, который служит заголовком гармошки. 
               
 Каждый элемент заголовка «гармошка» содержит кнопку, которая управляет видимостью его панели содержимого.
               
 В этом примере используется заголовок уровня 3, поэтому он правильно помещается в контуре страницы; пример содержится в разделе с заголовком уровня 2. 
             
 
         
 
 
 
           
  aria-extended = "true"  
           
  кнопка  
           

            Установите значение  true , когда панель «Гармошка» развернута, в противном случае установите значение  false .
           
         
 
 
 
           
  aria-controls = "ID"  
           
  кнопка  
           

            Указывает на идентификатор панели, которой управляет заголовок.
         
 
 
  регион  
           

           
  див  
           
 Создает область ориентира, содержащую развернутую в данный момент панель «аккордеон». 
         
 
 

           
  aria-labelledby = "IDREF"  
           
  див  
           

             
 
 Определяет доступное имя для элемента  области . 

               
 Ссылается на кнопку заголовка гармошки, которая разворачивает и сворачивает область.
               Область 
  Элементы  должны иметь доступное имя, чтобы их можно было идентифицировать как ориентир. 
             
 
         
 
 
  
 Исходный код JavaScript и CSS 
 
      
 Исходный код HTML 
 
    
     
  
Шаблон дизайна аккордеона в авторской практике WAI-ARIA 1.2
 Как создать гармошку в HTML без Javascript? 
 В этой статье вы узнаете, как создать эффект аккордеона в  HTML  без использования  JavaScript и jQuery.
 Что такое аккордеон? 
 Аккордеон очень полезен, чтобы помочь пользователю переключаться между отображением и скрытием большого содержимого. Например, на изображении ниже, когда пользователь щелкает направленную вниз стрелку, вы можете просмотреть содержимое и щелкнуть еще раз, чтобы скрыть это содержимое.
 Эффект аккордеона в HTML с использованием HTML5 
 Для создания аккордеона в HTML пользователь может использовать элемент сведений HTML5. Мы можем создать хороший аккордеон, используя элемент детализации и минимум CSS.
  Пример: 
  




<стиль>
Детали {
    граница: 1px solid # d4d4d4;
    заполнение: .75em .75em 0;
маржа сверху: 10 пикселей;
тень коробки: 0 0 20 пикселей # d4d4d4;
}

резюме {
    font-weight: жирный;
    маржа: -.75em -.75em 0;
    набивка: 0,75 мм;
    цвет фона: # 5f75a4;
    цвет: #fff;
}

подробности [open] {
    обивка:.75em;
нижняя граница: сплошной 1px # d4d4d4;
}

подробности [open] сводка {
    нижняя граница: сплошной 1px # d4d4d4;
    нижнее поле: 10 пикселей;
}



<подробности>
 Accordion One 
Содержание тела 1

<подробности>
 Аккордеон 2 
Содержание тела 2



  
 Код запуска
 В приведенном выше коде мы использовали HTML-элемент , , в котором сводный тег используется для отображения заголовка и тега сведений для отображения содержимого Accordion.
 CSS Accordion с использованием тегов checkbox, label и div 
 Чтобы создать аккордеон, сначала мы должны определить базовую структуру аккордеона.
  
 Заголовок Accordion One 

 Контент для первого аккордеона. 
 Контент для первого аккордеона. 
  
 В коде мы используем флажок для управления отображением и скрытием элементов аккордеона.Заголовок аккордеона определяется в теге  Label , тогда как содержимое Accordion находится в теге  div Tag . Если вы хотите создать несколько аккордеонов, продублируйте тот же код и измените значение флажка  id ,  Label  и  div Tag .
  Окончательный HTML 
  








 Заголовок Accordion One 

 Контент для первого аккордеона.
 Контент для первого аккордеона. 


 Заголовок "Два аккордеона" 

 Контент для второго аккордеона. 
 Контент для второго аккордеона. 


 Заголовок из трех гармошек 

 Контент для третьего Accordion.
 Контент для третьего аккордеона. 




  
  CSS Часть 
 1. Флажок "Скрыть" и содержимое 
 Если вы хотите показать аккордеон в закрытом состоянии, т.е. скрыть контент, когда пользователь нажимает на аккордеон. Мы должны скрыть  content div  и  checkbox , используя  CSS Class 
  .hidecontent {
    дисплей: нет;
}  
 2.CSS для аккордеонной товарной позиции 
  #myaccordion label {
тень коробки: 0 0 20 пикселей # d4d4d4;
дисплей: блок;
отступ: 8px 22px;
маржа: 20px 0px 1px 0px;
курсор: указатель;
фон: # 5f75a4;
цвет: #FFF;
переход: легкость .5s;
}
#myaccordion label: hover {
фон: # 5f75ff;
}  
 3.CSS для содержания 
  .content {
тень коробки: 0 0 20 пикселей # d4d4d4;
фон: #ffff;
отступ: 10 пикселей 25 пикселей;
граница: 1px solid # d4d4d4;
маржа: -1 0 0 0;
}  
 4.CSS для анимации 
  #myaccordion input: checked + label + .content {
дисплей: блок;
webkit-animation: fadeIn 0.5s замедление;
-moz-animation: fadeIn 0.5s замедление;
-o-animation: fadeIn 0.5s замедление;
анимация: fadeIn, замедление 0,5 с;
}
@ -webkit-keyframes fadeIn {
0% {
дисплей: нет;
непрозрачность: 0;
}
1% {
дисплей: блок;
непрозрачность: 0;
}
100% {
дисплей: блок;
непрозрачность: 1;
}
}  
  Примечание:  Если вы не хотите, чтобы свойство CSS вашего аккордеона не влияло на другие элементы HTML вашего документа, вы можете заключить его в тег div 
 
 Полный HTML-код: 
  


<стиль>
.hidecontent {
    дисплей: нет;
}

#myaccordion label {
тень коробки: 0 0 20 пикселей # d4d4d4;
дисплей: блок;
отступ: 8px 22px;
маржа: 20px 0px 1px 0px;
курсор: указатель;
фон: # 5f75a4;
цвет: #FFF;
переход: легкость .5s;
}
#myaccordion label: hover {
фон: # 5f75ff;
}
.содержание {
тень коробки: 0 0 20 пикселей # d4d4d4;
фон: #ffff;
отступ: 10 пикселей 25 пикселей;
граница: 1px solid # d4d4d4;
маржа: -1 0 0 0;
}
#myaccordion input: проверено + метка +.содержание {
дисплей: блок;
webkit-animation: fadeIn 0.5s замедление;
-moz-animation: fadeIn 0.5s замедление;
-o-animation: fadeIn 0.5s замедление;
анимация: fadeIn, замедление 0,5 с;
}
@ -webkit-keyframes fadeIn {
0% {
дисплей: нет;
непрозрачность: 0;
}
1% {
дисплей: блок;
непрозрачность: 0;
}
100% {
дисплей: блок;
непрозрачность: 1;
}
}






 Заголовок Accordion One 

 Контент для первого аккордеона.
 Контент для первого аккордеона. 


 Заголовок "Два аккордеона" 

 Контент для второго аккордеона. 
 Контент для второго аккордеона. 


 Заголовок из трех гармошек 

 Контент для третьего Accordion.
 Контент для третьего аккордеона. 




 
 
 Код запуска
  Выход: 
 Заключение 
 Оба примера, обсуждаемые в статье, будут поддерживать все современные браузеры, и вы можете добавлять анимацию для получения наилучших эффектов и привлекательности для пользователей.
 Accordion - Vuexy - шаблон администрирования Bootstrap HTML 
 Вы можете открывать по одному элементу за раз, для этого вы можете использовать аккордеон.
  Это первый корпус аккордеона.  По умолчанию скрыт, пока
 Плагин collapse добавляет соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы
 управлять общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете
 измените что-либо из этого с помощью пользовательского CSS или переопределив наши переменные по умолчанию.Также стоит отметить, что
 почти любой HTML может быть в пределах  .accordion-body , хотя переход ограничивает
 переполнение.
  Это корпус-гармошка для второго изделия.  По умолчанию скрыт, пока
 Плагин collapse добавляет соответствующие классы, которые мы используем для стилизации каждого элемента.Эти классы
 управлять общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете
 измените что-либо из этого с помощью пользовательского CSS или переопределив наши переменные по умолчанию. Также стоит отметить, что
 почти любой HTML может быть в пределах  .accordion-body , хотя переход ограничивает
 переполнение.
  Это корпус-гармошка третьего элемента. По умолчанию скрыт, пока
 Плагин collapse добавляет соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы
 управлять общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете
 измените что-либо из этого с помощью пользовательского CSS или переопределив наши переменные по умолчанию. Также стоит отметить, что
 почти любой HTML может быть в пределах  .accordion-body , хотя переход ограничивает
 переполнение.
 Глазурь сладкий рулет сахарная вата, брауни, леденцы, леденцы. Пирог с желейным драже. Мороженое
 вафли мармелад. Вафельный круассан морковный торт мармеладки вафельные мармеладки чупа чупс халва конфеты. Гамми
 несет сахарную вату желе-о халве. Макарон, яблочный пирог, драже, конфета, марципановый чизкейк. Желейное желе
 фасоль зефир.
 Аккордеонный компонент | Adobe Experience Manager 
 Базовый компонент "Гармошка" позволяет создать коллекцию панелей, расположенных гармошкой на странице.
 Использование 
 Компонент «Базовый компонент» «Гармошка» позволяет создавать набор компонентов, составленных в виде панелей и расположенных гармошкой на странице, аналогично компоненту «Вкладки», но позволяет разворачивать и сворачивать панели.
 Свойства аккордеона можно определить в диалоговом окне настройки.
 Порядок панелей аккордеона можно определить в диалоговом окне настройки, а также во всплывающем окне выбора панели.
 Значения по умолчанию для компонента «Гармошка» при добавлении его на страницу можно определить в диалоговом окне дизайна.
 Глубокая ссылка на панель 
 Компоненты Accordion и Tabs поддерживают прямое связывание с панелью внутри компонента.
 Для этого:
 Просмотрите страницу с компонентом, используя опцию  Просмотреть как опубликованную  в редакторе страницы.
 Проверьте содержимое страницы и определите идентификатор панели.
 Например,  id = "accordion-86196c94d3-item-ca319dbb0b" 
 Идентификатор становится привязкой, которую вы можете добавить к URL-адресу с помощью хэша ( # ).
 Например,  https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b 
 При переходе по URL-адресу с идентификатором панели в качестве привязки браузер прокручивает непосредственно к конкретному компоненту и отображает указанную панель.Если по умолчанию панель не раскрывается, она будет развернута автоматически.
 Версия и совместимость 
 Текущая версия Accordion Component - v1, которая была представлена ​​с выпуском 2.5.0 Core Components в июне 2019 года и описана в этом документе.
 В следующей таблице подробно описаны все поддерживаемые версии компонента, версии AEM, с которыми эти версии компонента совместимы, а также ссылки на документацию по предыдущим версиям.
 Версия компонента
 AEM 6.4
 AEM 6.5
 AEM как облачный сервис
 версия 1
 совместимый
 совместимый
 совместимый
 Для получения дополнительной информации о версиях и выпусках основных компонентов см. Документ «Версии основных компонентов».
 Пример выходных данных компонента 
 Чтобы испытать компонент Accordion, а также увидеть примеры его параметров конфигурации, а также выходные данные HTML и JSON, посетите Библиотеку компонентов.
 Технические характеристики 
 Последнюю техническую документацию по компоненту Accordion можно найти на GitHub.
 Дополнительные сведения о разработке базовых компонентов можно найти в документации для разработчиков по базовым компонентам.
 Диалоговое окно настройки 
 Диалоговое окно настройки позволяет автору контента определять элемент аккордеона, его панели и то, как он будет вести себя и отображаться для посетителя страницы.
 Вкладка "Элементы" 
 Используйте кнопку  Добавить , чтобы открыть селектор компонентов и выбрать, какой компонент добавить в качестве панели.После добавления запись добавляется в список, который содержит следующие столбцы:
  Значок  - Значок типа компонента панели для легкой идентификации в списке. Наведите указатель мыши на полное имя компонента во всплывающей подсказке.
  Описание  - Описание, используемое в качестве текста панели, по умолчанию используется имя компонента, выбранного для панели.
  Удалить  - Коснитесь или щелкните, чтобы удалить панель из компонента «аккордеон».
  Изменить порядок  - Коснитесь или щелкните и перетащите, чтобы изменить порядок панелей.
 Вкладка "Свойства" 
  Расширение отдельного элемента  - Если этот параметр выбран, принудительное раскрытие отдельного элемента аккордеона за раз. При раскрытии одного элемента все остальные будут свернуты.
  Расширенные элементы  - этот параметр определяет элементы, которые раскрываются по умолчанию при загрузке страницы.
 Если выбрано  Расширение одного элемента , должна быть выбрана одна панель.По умолчанию выбрана первая панель.
 Если  Расширение одного элемента  не выбрано, эта опция является множественным выбором и является необязательной.
  ID  - этот параметр позволяет управлять уникальным идентификатором компонента в HTML и на уровне данных.
 Если оставить поле пустым, для вас автоматически создается уникальный идентификатор, который можно найти, просмотрев полученную страницу.
 Если указан идентификатор, ответственность за его уникальность лежит на авторе.
 Изменение идентификатора может повлиять на отслеживание CSS, JS и уровня данных.
 Выбрать всплывающее окно панели 
 Автор контента может использовать опцию  Выбрать панель  на панели инструментов компонента, чтобы перейти на другую панель для редактирования, а также легко изменить порядок панелей в аккордеоне.
 После выбора опции  Выбрать панель  на панели инструментов компонента настроенные панели аккордеона отображаются в виде раскрывающегося списка.
 Список упорядочен по назначенному расположению панелей и отражен в нумерации.
 Сначала отображается тип компонента панели, а затем описание панели более светлым шрифтом.
 При нажатии или щелчке записи в раскрывающемся списке вид в редакторе переключается на эту панель.
 Панели можно переставлять на месте, используя ручки для перетаскивания.
 Диалог дизайна 
 Диалог дизайна позволяет автору шаблона определять параметры, доступные автору контента, который использует компонент «Гармошка», и значения по умолчанию, установленные при размещении компонента «Гармошка».
 Вкладка "Свойства" 
  Разрешенные элементы заголовка  - Это раскрывающееся меню с множественным выбором определяет элементы HTML заголовка аккордеона, которые могут быть выбраны автором.
  Элемент заголовка по умолчанию  - это раскрывающееся меню определяет элемент HTML заголовка элемента аккордеона по умолчанию.
 Вкладка "Разрешенные компоненты" 
 Вкладка «Допустимые компоненты »  используется для определения того, какие компоненты могут быть добавлены в качестве элементов на панели в «Двухкомпонентном компоненте» автором контента.
 Вкладка «Разрешенные компоненты» работает так же, как вкладка с тем же именем, при определении политики и свойств контейнера макета в редакторе шаблонов.
 Вкладка "Стили" 
 Компонент Accordion поддерживает систему стилей AEM.
 Уровень данных клиента Adobe 
 Компонент Accordion поддерживает уровень данных клиента Adobe.
 .
No related posts.