Аккордеон на чистом HTML | Пикабу

Аккордеон на чистом HTML | Пикабу

Css стили

Укажем ширину основного блока и размести его по центру страницы

.ac-container{
    width: 400px;
    margin: 10px auto 30px auto;
}

Javascript – accordion dropdown не работает на мобильном телефоне / планшете –

У меня есть аккордеонное выпадающее меню для часто задаваемых вопросов на моем сайте. На мобильном телефоне, когда вы нажимаете на бар, аккордеон падает, а затем быстро исчезает. Я бы хотел, чтобы раздел с ответами выпал (возможно, с плавным переходом) и оставался до тех пор, пока не будет снова нажата панель вопросов или пока не будет нажата другая панель вопросов. Я использую следующий код:

JS

    <script> 
$(document).ready(function(){

  $(document).on('touchstart mousedown', '.acc-btn', function(){
    // If you only want one visible at a time:
    $('.acc-container').find('.selected').not(this).removeClass('selected');

    // ^^ 'closes' everything by removing the class selected.
    // Except the one we just clicked, otherwise it wouldn't toggle—
    // the class would get removed and added back two lines down.


    $(this).toggleClass('selected');

  });

});</script>

HTML

<div class="acc-container">

<div class="acc-btn"><h1>What is Company?</h1></div>

<div class="acc-content">

<div class="acc-content-inner">

<p> Answer blah blah</p>

</div>

</div>

CSS

.acc-container {
  width:90%;
  margin:30px auto 0 auto;
  overflow:hidden;
}

.acc-btn { 
 font-family: "Oswald", sans-serif;
font-weight:lighter;
text-transform: uppercase;
padding: 5px 5px 5px 5px;
margin-bottom:3px;
height: 100%;
cursor: pointer;

}


.acc-content {
  max-height:0px;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  background:#C9C8C8;
  color:#000000;
  /*-webkit-transition: all 0.35s ease-in-out 0s;
  -moz-transition: all 0.35s ease-in-out 0s;
  transition: all 0.35s ease-in-out 0s;*/
}

.selected   .acc-content {
    max-height: 700px;
}

.acc-content-inner {
  padding:30px;
}

.open {
  height: auto;
}

Быстрое и простое решение заключается в замене

$(document).on('touchstart mousedown',

С участием

$(document).on('click',

Код, который вы написали, присоединяет логику открытия / закрытия к и событиям touchstart и mousedown. Проблема заключается в том, что на большинстве современных мобильных устройств физическое касание используется для запуска как сенсорных событий , так и событий мыши. Это сделано для улучшения совместимости с сайтами, которые не были созданы, чтобы быть сенсорными.

Это доставляет вам неприятности, потому что как только одна из них запускается, другая следует за отменой того, что вы только что сделали.

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

Это немного меняет ваше поведение, потому что щелчок точно не копирует mousedown (щелчок требует, чтобы кнопка была одновременно нажата и отпущена до запуска), но это более стандартное поведение и, я думаю, то, что вы ищете.

Jquery ui accordion не работает правильно на моем сайте drupal 6 – аккордеон не открывается/закрывается

Использование Drupal 6, и я считаю, что я правильно реализовал jquery 1.3.2 и jquery ui 1.7.3

Я так близко, но мой аккордеон не работает правильно. Похоже, что не все правильные классы добавляются jquery ui/accordion к моему аккордеон, и, таким образом, “закрытые” части аккордеона фактически остаются открытыми. Здесь моя страница:

http://aaatoday.org/content/test-2021-aaa-annual-meeting-0

У меня есть эта строка в файле template.php:

jquery_ui_add('ui.accordion');

и этот вызов функции в файле js загружается через мой файл .info.

Drupal.behaviors.nidaitnlBehavior = function (context) {
$("#accordion").accordion();
};

При использовании Firebug я могу видеть, что некоторые классы аккордеона ui добавляются в контейнер контейнера #accordion и в заголовки h3, но не для самих аккордеонных div.

Аккордеон на css

.acor-container {

    margin:20px;

}

.acor-container .acor-body {

    width:calc(100%40px);

    margin:auto;

    height:;

    color:rgba(0,0,0,);

    background-color:#BFE2FF;

    line-height:18px;

    padding:30px;

    box-sizing:border-box;

    transition:color0.5s,padding0.5s;

    overflow:hidden;

    font-family:Verdana,sans-serif;

    font-size:16px;

    box-shadow:4px8pxrgba(0,0,0,0.2),10px16pxrgba(0,0,0,0.2);

}

.acor-container .acor-body p {

    margin:10px;

}

.acor-container label {

    cursor:pointer;

    background-color:#337AB7;

    display:block;

    padding:15px20px;

    width:100%;

    color:#BFE2FF;

    font-weight:300;

    box-sizing:border-box;

    z-index:100;

    font-family:Verdana,sans-serif;  

    font-size:18px;

    margin:5px;

    transition:color.35s;

}

.acor-container label:hover {

    color:#FFF;

}

.acor-container input{

    display:none;

}

.acor-container label:before {

    content:‘276F’;

    float:right;

}

.acor-container input:checked label {

    background-color:#285f8f;

    color:#FFF;

    box-shadow:8px26pxrgba(0,0,0,0.4),28px30pxrgba(0,0,0,0.3);

}

.acor-container input:checked label:before {

    transition:transform.35s;

    transform:rotate(90deg);

}

.acor-container input:checked label .acor-body {

    height:auto;

    margin-top:-5px;

    color:#000;

    padding:20px30px10px;

}

Аккордеон на чистом html

Сейчас ищут техподдержку:  Мосэнергосбыт не работает сегодня только у меня? Статус - текущие проблемы и сбои сайта 2021
Сейчас ищут техподдержку:  Улучшаем производительность HTML5 canvas / Хабр

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Аккордеон и faq

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

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

  1. Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
  2. Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
  3. Будет доступно управление элементами с клавиатуры и других устройств.
  4. Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
  5. Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
  6. Работает при выключенном javascript.

Минус:

  1. Старые браузеры не знают таких тегов и не будут скрывать информацию.

HTML:

<details>
    <summary>Покажи-скрой меня</summary>
    <p>Скандинавская мифология — мифология древних скандинавов</p>
</details>
<details open>
    <summary>Покажи-скрой меня 2</summary>
    <p>Основным источником сведений о ней являются тексты поэтической </p>
</details>
<details>
    <summary>Покажи-скрой меня 3</summary>
    <p>Скандинавская мифология — мифология древних скандинавов</p>
</details>

Простой пример Details/Summary

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

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

Спойлер от Хабра

К сожалению, у дефолтного маркера есть два недостатка:

  1. Старые браузеры его не видят.
  2. Вебкит баузеры не позволяют менять символ маркера.

По этой причине, дефолтный маркер надо спрятать и создать свой.

Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

Details/Summary с измененным текстовым маркером

CSS:

summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:inline-block;
   padding: .3em .5em .3em .4em;
   font-size:1.4em;
   cursor: pointer;
}
summary:before {  
  content: " ";
  margin-right: .3em;
}
details[open] > summary:before {
  content: "–";
}
summary ~ * {
   padding:0 1em 0 1em;
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}
details{
  display:block;
  margin-bottom: .5rem;
}

Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before {content: ” “;}

summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

Сейчас ищут техподдержку:  Устранение проблем с синхронизацией в Dropbox | Справка Dropbox

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

Текстовый маркер справа простейшая анимация текста и маркера:

Details/Summary - текстовый маркер справа   простейшая анимация текста и маркера

CSS:

summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:inline-block;
   padding: .3em .5em .3em .4em;
   font-size:1.4em;
   cursor: pointer;
}
summary:after {  
  content: " ";
  margin-left: .3em;
  display: inline-block;
  transition: transform .5s;
}
details[open] > summary:after {
  transform: scale(1,-1);
}
summary ~ * {
   padding:0 1em 0 1em;
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}
details[open] summary ~ *{ 
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
details{
  display:block;
  margin-bottom: .5rem;
}

В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.

Анимация маркера при помощи transform: scale(1,-1);

Всем элементам, которые находится после summary, ставлю анимацию плавного появления при помощи animation: sweep .5s ease-in-out;

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

Svg маркер анимация поворота:

Details/Summary - svg маркер   анимация поворота

CSS:

summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:inline-block;
   padding: .3em .6em .3em 1.5em;
   font-size:1.4em;
   cursor: pointer;
   position: relative;
}
summary:before {  
  left: .3em;
  top: .4em;
  color: transparent;
  background: url("data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em;
  width: 1em;
  height: 1em;  
  content: "";
  position: absolute;
  transition: transform .5s;
}
details[open] > summary:before {
  transform: rotateZ(90deg);
}
summary ~ * {
   padding:0 1em 0 1em;
}
details[open] summary ~ *{ 
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}
details{
  display:block;
  margin-bottom: .5rem;
}

Summary:before пришлось серьезно переделать:

  1. Поставить position: absolute; left: .3em; top: .4em; width: 1em; height: 1em;
  2. Текстовому маркеру надо обязательно поставить color: transparent; иначе он будет виден.
  3. Картинку вешаем при помощи background.

Так же нужно у summary поставить отступ padding-left: 1.5em, чтоб текст и иконка не накладывались друг на друга.

Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

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

Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.

Для summary поставить padding-right: 1.5em;

Details/Summary - svg маркер справа   анимация поворота

CSS:

summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:inline-block;
   padding: .3em 1.5em .3em .6em;
   font-size:1.4em;
   cursor: pointer;
   position: relative;
}
summary:before {
  right: .3em;
  top: .4em;
  color: transparent;
  background: url("data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em;
  width: 1em;
  height: 1em;  
  content: "";
  position: absolute;
  transition: transform .5s;
}
details[open] > summary:before {
  transform: rotateZ(90deg);
}
summary ~ * {
   padding:0 1em 0 1em;
}
details[open] summary ~ *{ 
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}
details{
  display:block;
  margin-bottom: .5rem;
}

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

Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

Аккордион - иконка слева, фон, тени, эффекты

CSS:

body{background: #edf2f7;}
details{
  display:block;
  background: #fff;
  width:400px;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  overflow:hidden;
  margin-bottom: 1.5rem;
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:block;
   padding: .3em .3em .3em 1.4em;
   font-size:1.4em;
   cursor: pointer;
   position: relative;
   border-bottom: 1px solid #e2e8f0;
}
summary:before {  
  top: .4em;
  left: .3em;
  color: transparent;
  background: url("data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em;
  width: 1em;
  height: 1em;  
  content: "";
  position: absolute;
  transition: transform .5s;
}
details[open] > summary:before {
  transform: rotateZ(90deg);
}
summary ~ * {
   padding: 0 2em 10px 2em;
}
details[open] summary ~ *{ 
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}

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

Svg маркер справа эффект зеркального поворота стрелки:

Аккордион - иконка справа   эффект зеркального поворота стрелки

CSS:

body{background: #edf2f7;}
details{
  display:block;
  background: #fff;
  width:400px;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  overflow:hidden;
  margin-bottom: 1.5rem;
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:block;
   padding: .3em 1em .3em .9em;
   border-bottom: 1px solid #e2e8f0;
   font-size:1.4em;
   cursor: pointer;
   position: relative;
}
summary:before {  
  top: .4em;
  right: .3em;
  color: transparent;
  background: url("data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em;
  width: 1em;
  height: 1em;  
  content: "";
  position: absolute;
  transition: transform .5s;
}
details[open] > summary:before {
  transform: scale(1,-1);
}
summary ~ * {
   padding: 0 1em 10px 1.4em;
}
details[open] summary ~ *{ 
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}

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

Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

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

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

JavaScript:

var details = document.querySelectorAll("details");
for(i=0;i<details.length;i  ) {
  details[i].addEventListener("toggle", accordion);
}
function accordion(event) {
  if (!event.target.open) return;
    var details = event.target.parentNode.children;
    for(i=0;i<details.length;i  ) {
      if (details[i].tagName != "DETAILS" || 
         !details[i].hasAttribute('open') || 
         event.target == details[i]) {
         continue;
      }
      details[i].removeAttribute("open");
    }
}

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

Таблица поддержки Details/Summary браузерами.

С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

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

Adblock
detector