Главная » Языки программирования

Html css javascript accordion

Содержание
  1. Аккордеон, faq, спойлер и другие раскрывающиеся виджеты
  2. How TO — Collapsibles/Accordion
  3. Accordion
  4. Create An Accordion
  5. Example
  6. Example
  7. Example
  8. Animated Accordion (Slide Down)
  9. Example
  10. Add Icons
  11. Example
  12. 37 CSS Accordions
  13. Related Articles
  14. Author
  15. Links
  16. Made with
  17. About a code
  18. CSS Only Semantic Animated Accordion
  19. Author
  20. Links
  21. Made with
  22. About a code
  23. Accordion
  24. Author
  25. Links
  26. Made with
  27. About a code
  28. Native HTML Details Element Styled via CSS
  29. Author
  30. Links
  31. Made with
  32. About a code
  33. Accordion Flexbox
  34. Author
  35. Links
  36. Made with
  37. About a code
  38. Accordion with Pure CSS and HTML
  39. Author
  40. Links
  41. Made with
  42. About a code
  43. Accordion
  44. Author
  45. Links
  46. Made with
  47. About a code
  48. Accordion without Using JavaScript
  49. Author
  50. Links
  51. Made with
  52. About a code
  53. HTML CSS Accordion without JavaScript / jQuery
  54. Author
  55. Links
  56. Made with
  57. About a code
  58. Accordion Menu With HTML & CSS Only
  59. Author
  60. Links
  61. Made with
  62. About a code
  63. Simple accordion Menu with HTML And CSS
  64. Author
  65. Links
  66. Made with
  67. About a code
  68. Accordion Menu HTML CSS Only
  69. Author
  70. Links
  71. Made with
  72. About a code
  73. Pure HTML CSS Accordion
  74. Author
  75. Links
  76. Made with
  77. About the code
  78. Accordion Content
  79. Author
  80. Links
  81. Made with
  82. About the code
  83. Accordions Pls
  84. Author
  85. Links
  86. Made with
  87. About the code
  88. Accordion In Js
  89. Author
  90. Links
  91. Made with
  92. About the code
  93. Accordion 2.0
  94. Author
  95. Links
  96. Made with
  97. About the code
  98. Accordion
  99. Author
  100. Links
  101. Made with
  102. About the code
  103. ARIA Accessible Accordion
  104. Author
  105. Links
  106. Made with
  107. About the code
  108. FAQ Accordion
  109. Author
  110. Links
  111. Made with
  112. About the code
  113. Basic Accordion
  114. Simple Accordion Concept
  115. Funky Pure CSS Accordion
  116. Expanding Horizontal Accordion In React
  117. Pure CSS Accordion
  118. CSS Accordion
  119. 3D Accordion
  120. Author
Читайте также:  Css style margin left right

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

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

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

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

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

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

summary::-webkit-details-marker summary::-moz-list-bullet summary::marker 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

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

Читайте также:  Div tag in html center

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

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

summary::-webkit-details-marker summary::-moz-list-bullet summary::marker 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% 100% > details

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

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

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

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

summary::-webkit-details-marker summary::-moz-list-bullet summary::marker 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% 100% > 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

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

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

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

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

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

summary::-webkit-details-marker summary::-moz-list-bullet summary::marker 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% 100% > 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

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

body 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 summary::-moz-list-bullet summary::marker 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% 100% > summary:focus

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

body 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 summary::-moz-list-bullet summary::marker 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% 100% > summary:focus

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

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

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

var details = document.querySelectorAll("details"); for(i=0;i function accordion(event) < if (!event.target.open) return; var details = event.target.parentNode.children; for(i=0;idetails[i].removeAttribute("open"); > >

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

Источник

How TO — Collapsibles/Accordion

Learn how to create an accordion (collapsible content).

Accordion

Accordions are useful when you want to toggle between hiding and showing large amount of content:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Create An Accordion

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* Style the buttons that are used to open and close the accordion panel */
.accordion background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
>

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover background-color: #ccc;
>

/* Style the accordion panel. Note: hidden by default */
.panel padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
>

Step 3) Add JavaScript:

Example

var acc = document.getElementsByClassName(«accordion»);
var i;

for (i = 0; i < acc.length; i++) acc[i].addEventListener("click", function() /* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle(«active»);

/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === «block») panel.style.display = «none»;
> else panel.style.display = «block»;
>
>);
>

Animated Accordion (Slide Down)

To make an animated accordion, add max-height: 0 , overflow: hidden and a transition for the max-height property, to the panel class.

Then, use JavaScript to slide down the content by setting a calculated max-height , depending on the panel’s height on different screen sizes:

Example

var acc = document.getElementsByClassName(«accordion»);
var i;

for (i = 0; i < acc.length; i++) acc[i].addEventListener("click", function() this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) panel.style.maxHeight = null;
> else panel.style.maxHeight = panel.scrollHeight + «px»;
>
>);
>

Add Icons

Add a symbol to each button to indicate whether the collapsible content is open or closed:

Example

.accordion:after <
content: ‘\02795’; /* Unicode character for «plus» sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
>

.active:after content: «\2796»; /* Unicode character for «minus» sign (-) */
>

Источник

37 CSS Accordions

Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, responsive, animated, etc. Update of March 2020 collection. 14 new examples.

Author

Made with

About a code

CSS Only Semantic Animated Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion

A demonstation of what you can do with the details and summary elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Native HTML Details Element Styled via CSS

Implementation of an accordion-like component using only the details/summary native HTML element and CSS for styling. Best results can be seen in Chrome or Blink-based browsers. Firefox and others have decent results as well, but they could be improved creating alternative open/close icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion Flexbox

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion with Pure CSS and HTML

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion without Using JavaScript

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

HTML CSS Accordion without JavaScript / jQuery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion Menu With HTML & CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Simple accordion Menu with HTML And CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion Menu HTML CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure HTML CSS Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Accordion Content

Air quotes card mode grid and accordion content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Accordions Pls

Author

Made with

About the code

Accordions Pls

Vertical accordion with HTML, CSS and JS (Vue.js).

Demo image: Accordion In Js

Author

Made with

About the code

Accordion In Js

Accordion in vanilla JS with CSS transition.

Demo image: Accordion 2.0

Author

Made with

About the code

Accordion 2.0

Vertical accordion with HTML, CSS and JS.

Demo image: Accordion

Author

Made with

About the code

Accordion

Accordion JS functionality allowing you to set the animation speed of the toggle. You also have the option of being able to have just one accordion item open at any one given time.

Demo image: ARIA Accessible Accordion

Author

Made with

About the code

ARIA Accessible Accordion

A simple accordion that can be used by both mouse and keyboard-only users.

Demo image: FAQ Accordion

Author

Made with

About the code

FAQ Accordion

Minimal FAQ accordion made with little vanilla JavaScript.

Demo image: Basic Accordion

Author

Made with

About the code

Basic Accordion

Basic accordion in HTML, CSS and JS.

Demo Image: Simple Accordion Concept

Simple Accordion Concept

HTML, CSS and JavaScript simple accordion concept.
Made by Kyle Brumm
March 24, 2017

Demo Image: Funky Pure CSS Accordion

Funky Pure CSS Accordion

Another pure CSS UI Piece here using radio buttons for the active states.
Made by Jamie Coulter
March 19, 2017

Demo Image: Expanding Horizontal Accordion in React

Expanding Horizontal Accordion In React

A quick alternative to the standard ‘Accordion’ pattern, built completely with React.
Made by Sean
January 7, 2017

Demo Image: Pure CSS Accordion

Pure CSS Accordion

Image accordion only with CSS and color filters using the rgba() function.
Made by Eduardo Moreno
November 26, 2016

Demo Image: CSS Accordion

CSS Accordion

A simple solution for creating a pure CSS accordion with a CSS transition on the panel height, achieved by setting «max-height» of the accordion panel instead of «height».
Made by Matthew Scott
October 28, 2016

Demo Image: 3D Accordion

3D Accordion

Simple accordion with 3D folding paper effect in HTML, CSS and JavaScript.
Made by Pawe Targoski
June 13, 2016

Demo image: Material Design Accordion - Bootstrap 3

Author

Источник

Оцените статью
© 2024 Программирование