Я хочу, чтобы все аккордеоны были закрыты в мобильном представлении. В настоящее время первый всегда открыт в мобильном представлении. В десктопе гармошка находится во вкладках. Содержимое первой вкладки всегда должно отображаться в мобильном представлении. Это также, как это отображается в данный момент. Но я хочу, чтобы все гармошки были закрыты в мобильной версии. Может кто-нибудь помочь мне переписать скрипт, чтобы только в мобильной версии все аккордеоны были закрыты?
Спасибо большое!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/aos@2.3.0/dist/aos.css">
<style>
*, *::before, *::after {
box-sizing: border-box;
}
code {
font-family: Consolas,monaco,monospace;
line-height: 1.75;
background-color: rgba(255, 255, 255, 0.15);
padding: 6px 8px 2px;
border-radius: 4px;
opacity: 0.65;
}
.tabs-tab-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.tabs-tab-list li {
margin: 0;
}
.tabs-trigger {
border-bottom: none;
color: #505052;
display: none;
font-weight: normal;
margin: 0 5px 0 1px;
padding: 15px 20px;
text-decoration: none;
}
.tabs-trigger:hover {
border-bottom: none;
color: #888;
text-decoration: none;
}
.tabs-trigger.is-selected, .tabs-trigger.is-selected:hover, .tabs-trigger.is-selected:focus {
color: #505052;
border-bottom: 2px solid #75b823;
font-weight: bold;
}
.tabs-trigger:active {
outline: none;
}
.tabs-panel {
display: block;
margin: 0;
padding: 0;
}
.tabs-panel:not(:first-of-type) {
border-top: 2px solid #eee;
}
.tabs-panel:not(:last-child) {
border-bottom: 1px solid #eee;
}
.tabs-panel:not(:last-child) {
border-bottom: none;
}
.tabs-panel .content {
}
.tabs-panel.is-hidden .content {
display: none;
}
.tabs-panel:active, .tabs-panel:focus {
outline: none;
}
.is-initialized.tabs-allowed .tabs-panel {
display: inherit;
}
.accordeon-trigger {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 15px 20px;
}
.accordeon-trigger-icon {
pointer-events: none;
}
@media (min-width: 40em) {
.tabs-allowed .accordeon-trigger {
display: none;
}
.tabs-allowed .tabs-trigger {
display: block;
}
.tabs-allowed .tabs-panel {
display: none;
}
.tabs-allowed .tabs-panel.is-hidden {
display: none;
}
.tabs-allowed .tabs-panel {
border-top: 2px solid #eee;
}
.tabs-allowed .tabs-tab-list {
margin-bottom: -2px;
}
}
.accordeon-trigger-icon {
display: inline-block;
float: right;
width: 22px;
height: 22px;
}
.accordeon-trigger-icon svg {
margin: 0;
}
[aria-expanded="true"] .vert {
display: none;
}
.label--open, .label--close {
display: block;
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.label--close {
display: none;
}
.is-open .label--open {
display: none;
}
.is-open .label--close {
display: block;
}
</style>
</head>
<body>
<!-- Tabs -------------------------------------------------------------------->
<div>
<div class="container-fluid">
<section class="accordion-tabs js-tabs" data-tabs-allowed="true" data-breakpoint="400" data-start-collapsed="false">
<ul role="tablist" class="tabs-tab-list page-width">
<li onclick="myFunction()" role="presentation"><a id="tab1" href="#section1" role="tab" aria-controls="section1" class="tabs-trigger js-tabs-trigger">Section 1</a></li>
<li onclick="myFunction()" role="presentation"><a id="tab2" href="#section2" role="tab" aria-controls="section2" class="tabs-trigger js-tabs-trigger">Section 2</a></li>
<li onclick="myFunction()" role="presentation"><a id="tab3" href="#section3" role="tab" aria-controls="section3" class="tabs-trigger js-tabs-trigger">Section 3</a></li>
<li onclick="myFunction()" role="presentation"><a id="tab4" href="#section4" role="tab" aria-controls="section4" class="tabs-trigger js-tabs-trigger">Section 4</a></li>
</ul>
<section id="section1" role="tabpanel" aria-labelledby="tab1" class="tabs-panel js-tabs-panel" tabindex="0">
<div class="accordeon-trigger js-accordeon-trigger" aria-controls="section1" aria-expanded="false" tabindex="0">Section 1
<div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span> <svg aria-hidden="true" focusable="false" viewbox="0 0 20 20"> <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect> <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect>
</svg></div></div>
<div class="content" aria-hidden="false">
<h1>
content
</h1>
</div>
</section>
<section id="section2" role="tabpanel" aria-labelledby="tab2" class="tabs-panel js-tabs-panel" tabindex="1">
<div class="accordeon-trigger js-accordeon-trigger" aria-controls="section2" aria-expanded="false" tabindex="1">Section 2
<div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewbox="0 0 20 20"> <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect> <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect> </svg></div>
</div>
<div class="content" aria-hidden="true"><!--TAB 2 ------------------------------------------------->
<h1>
Content
</h1>
</div>
</section>
<section id="section3" role="tabpanel" aria-labelledby="tab3" class="tabs-panel js-tabs-panel" tabindex="2">
<div class="accordeon-trigger js-accordeon-trigger" aria-controls="section3" aria-expanded="false" tabindex="2">Section 3
<div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewbox="0 0 20 20"> <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect> <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect> </svg></div>
</div>
<div class="content" aria-hidden="true"><!--TAB 3 ------------------------------------------------->
<h1>
<h1>content</h1>
</h1>
</div>
</section>
<section id="section4" role="tabpanel" aria-labelledby="tab4" class="tabs-panel js-tabs-panel" tabindex="3">
<div class="accordeon-trigger js-accordeon-trigger" aria-controls="section4" aria-expanded="false" tabindex="3">Section 4
<div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewbox="0 0 20 20"> <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect> <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect> </svg></div>
</div>
<div class="content" aria-hidden="true"><!--TAB 4 ------------------------------------------------->
<div>
<h1>Content</h1>
</div>
</div>
</section>
</section>
</div>
</div>
</body>
<script>
(function () {
'use strict';
function AccordionTabs (el, options) {
if (!el) {
return;
}
this.el = el;
this.tabTriggers = this.el.getElementsByClassName('js-tabs-trigger');
this.tabPanels = this.el.getElementsByClassName('js-tabs-panel');
this.accordeonTriggers = this.el.getElementsByClassName('js-accordeon-trigger');
this.options = this._extend({
breakpoint: 640,
tabsAllowed: true,
selectedTab: 0,
startCollapsed: true,
}, options);
if(el.getAttribute('data-tabs-allowed') == "true"){
this.options.tabsAllowed = true;
} else if (el.getAttribute('data-tabs-allowed') == "false") {
this.options.tabsAllowed = false;
}
if(el.getAttribute('data-breakpoint')){
this.options.breakpoint = parseInt(el.getAttribute('data-breakpoint'));
}
if(el.getAttribute('data-selected-tab')){
this.options.selectedTab = parseInt(el.getAttribute('data-selected-tab'));
}
if(el.getAttribute('data-start-collapsed')){
this.options.startCollapsed = el.getAttribute('data-start-collapsed');
}
if (this.tabTriggers.length === 0 || this.tabTriggers.length !== this.tabPanels.length) {
return;
}
this._init();
}
AccordionTabs.prototype._init = function () {
var _this = this;
this.tabTriggersLength = this.tabTriggers.length;
this.accordeonTriggersLength = this.accordeonTriggers.length;
this.selectedTab = 0;
this.prevSelectedTab = null;
this.clickListener = this._clickEvent.bind(this);
this.keydownListener = this._keydownEvent.bind(this);
this.keys = {
prev: 37,
next: 39,
space: 32,
enter: 13
};
if(window.innerWidth >= this.options.breakpoint && this.options.tabsAllowed) {
this.isAccordeon = false;
} else {
this.isAccordeon = true;
}
for (var i = 0; i < this.tabTriggersLength; i++) {
this.tabTriggers[i].index = i;
this.tabTriggers[i].addEventListener('click', this.clickListener, false);
this.tabTriggers[i].addEventListener('keydown', this.keydownListener, false);
if (this.tabTriggers[i].classList.contains('is-selected')) {
this.selectedTab = i;
}
this._hide(i);
}
for (var i = 0; i < this.accordeonTriggersLength; i++) {
this.accordeonTriggers[i].index = i;
this.accordeonTriggers[i].addEventListener('click', this.clickListener, false);
this.accordeonTriggers[i].addEventListener('keydown', this.keydownListener, false);
if (this.accordeonTriggers[i].classList.contains('is-selected')) {
this.selectedTab = i;
}
}
if (!isNaN(this.options.selectedTab)) {
this.selectedTab = this.options.selectedTab < this.tabTriggersLength ? this.options.selectedTab : this.tabTriggersLength - 1;
}
this.el.classList.add('is-initialized');
if (this.options.tabsAllowed) {
this.el.classList.add('tabs-allowed');
}
// If the accordion should not start collapsed, open the first element
if(this.options.startCollapsed != "true"){
this.selectTab(this.selectedTab, false);
}
var resizeTabs = this._debounce(function() {
// This gets delayed for performance reasons
if(window.innerWidth >= _this.options.breakpoint && _this.options.tabsAllowed) {
_this.isAccordeon = false;
if (_this.options.tabsAllowed) {
_this.el.classList.add('tabs-allowed');
}
_this.selectTab(_this.selectedTab);
} else {
_this.isAccordeon = true;
_this.el.classList.remove('tabs-allowed');
_this.selectTab(_this.selectedTab);
}
}, 50);
window.addEventListener('resize', resizeTabs);
};
AccordionTabs.prototype._clickEvent = function (e) {
e.preventDefault();
var closestTrigger = this._getClosest(e.target, '.js-tabs-trigger');
var closestTab = 0;
if (closestTrigger == null) {
closestTrigger = this._getClosest(e.target, '.js-accordeon-trigger');
closestTab = this._getClosest(closestTrigger, '.js-tabs-panel');
this.isAccordeon = true;
} else {
this.isAccordeon = false;
}
var targetIndex = e.target.index != null ? e.target.index : closestTab.index;
if (targetIndex === this.selectedTab && !this.isAccordeon) {
return;
}
this.selectTab(targetIndex, true);
};
AccordionTabs.prototype._keydownEvent = function (e) {
var targetIndex;
if (e.keyCode === this.keys.prev || e.keyCode === this.keys.next || e.keyCode === this.keys.space || e.keyCode === this.keys.enter) {
e.preventDefault();
}
else {
return;
}
if (e.keyCode === this.keys.prev && e.target.index > 0 && !this.isAccordeon) {
targetIndex = e.target.index - 1;
}
else if (e.keyCode === this.keys.next && e.target.index < this.tabTriggersLength - 1 && !this.isAccordeon) {
targetIndex = e.target.index + 1;
}
else if (e.keyCode === this.keys.space || e.keyCode === this.keys.enter) {
targetIndex = e.target.index;
}
else {
return;
}
this.selectTab(targetIndex, true);
};
AccordionTabs.prototype._show = function (index, userInvoked) {
this.tabPanels[index].removeAttribute('tabindex');
this.tabTriggers[index].removeAttribute('tabindex');
this.tabTriggers[index].classList.add('is-selected');
this.tabTriggers[index].setAttribute('aria-selected', true);
this.accordeonTriggers[index].setAttribute('aria-expanded', true);
var panelContent = this.tabPanels[index].getElementsByClassName("content")[0];
panelContent.setAttribute('aria-hidden', false);
panelContent.classList.remove('is-hidden');
panelContent.classList.add('is-hidden');
this.tabPanels[index].classList.remove('is-hidden');
this.tabPanels[index].classList.add('is-open');
if (userInvoked) {
this.tabTriggers[index].focus();
}
};
AccordionTabs.prototype._hide = function (index) {
this.tabTriggers[index].classList.remove('is-selected');
this.tabTriggers[index].setAttribute('aria-selected', false);
this.tabTriggers[index].setAttribute('tabindex', -1);
this.accordeonTriggers[index].setAttribute('aria-expanded', false);
var panelContent = this.tabPanels[index].getElementsByClassName("content")[0];
panelContent.setAttribute('aria-hidden', true);
panelContent.classList.remove('is-open');
panelContent.classList.add('is-hidden');
this.tabPanels[index].classList.remove('is-open');
this.tabPanels[index].classList.add('is-hidden');
this.tabPanels[index].setAttribute('tabindex', -1);
};
AccordionTabs.prototype.selectTab = function (index, userInvoked) {
if (index === null) {
if(this.isAccordeon) {
return;
} else {
index = 0;
}
}
if(!this.tabPanels[index].classList.contains('is-hidden') && userInvoked) {
if (index === this.selectedTab) {
this.selectedTab = null;
} else {
this.selectedTab = null;
this.prevSelectedTab = index;
}
this._hide(index);
return;
}
if (this.isAccordeon) {
this.prevSelectedTab = this.selectedTab;
this.selectedTab = index;
} else {
if (this.prevSelectedTab === null || !this.isAccordeon) {
for (var i = 0; i < this.tabTriggersLength; i++) {
if (i !== index) {
this._hide(i);
}
}
}
else {
this._hide(this.selectedTab);
}
this.prevSelectedTab = this.selectedTab;
this.selectedTab = index;
}
this._show(this.selectedTab, userInvoked);
};
AccordionTabs.prototype.destroy = function () {
for (var i = 0; i < this.tabTriggersLength; i++) {
this.tabTriggers[i].classList.remove('is-selected');
this.tabTriggers[i].removeAttribute('aria-selected');
this.tabTriggers[i].removeAttribute('tabindex');
this.tabPanels[i].classList.remove('is-hidden');
this.tabPanels[i].removeAttribute('aria-hidden');
this.tabPanels[i].removeAttribute('tabindex');
this.tabTriggers[i].removeEventListener('click', this.clickListener, false);
this.tabTriggers[i].removeEventListener('keydown', this.keydownListener, false);
delete this.tabTriggers[i].index;
}
this.el.classList.remove('is-initialized');
};
/**
* Get the closest matching element up the DOM tree.
* @private
* @param {Element} elem Starting element
* @param {String} selector Selector to match against
* @return {Boolean|Element} Returns null if not match found
*/
AccordionTabs.prototype._getClosest = function ( elem, selector ) {
// Element.matches() polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// Get closest match
for ( ; elem && elem !== document; elem = elem.parentNode ) {
if ( elem.matches( selector ) ) return elem;
}
return null;
};
// Pass in the objects to merge as arguments.
// For a deep extend, set the first argument to `true`.
AccordionTabs.prototype._extend = function () {
// Variables
var extended = {};
var deep = false;
var i = 0;
var length = arguments.length;
// Check if a deep merge
if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) {
deep = arguments[0];
i++;
}
// Merge the object into the extended object
var merge = function (obj) {
for ( var prop in obj ) {
if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) {
// If deep merge and property is an object, merge properties
if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) {
extended[prop] = extend( true, extended[prop], obj[prop] );
} else {
extended[prop] = obj[prop];
}
}
}
};
// Loop through each object and conduct a merge
for ( ; i < length; i++ ) {
var obj = arguments[i];
merge(obj);
}
return extended;
};
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
AccordionTabs.prototype._debounce = function (func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) { func.apply(context, args); };
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) { func.apply(context, args) };
};
};
var slice = Array.prototype.slice;
function $(expr, con) {
return typeof expr === "string" ? (con || document).querySelector(expr) : expr || null;
}
function $$(expr, con) {
return slice.call((con || document).querySelectorAll(expr));
}
// Initialization
function init() {
$$(".js-tabs").forEach(function (input) {
new AccordionTabs(input);
});
}
// Are we in a browser? Check for Document constructor
if (typeof Document !== "undefined") {
// DOM already loaded?
if (document.readyState !== "loading") {
init();
}
else {
// Wait for it
document.addEventListener("DOMContentLoaded", init);
}
}
// Export on self when in a browser
if (typeof self !== "undefined") {
self.AccordionTabs = AccordionTabs;
}
// Expose as a CJS module
if (typeof module === "object" && module.exports) {
module.exports = AccordionTabs;
}
return AccordionTabs;
})();
</script>
<script type="text/javascript" src="https://unpkg.com/aos@2.3.0/dist/aos.js"></script>
<script>
AOS.init({
duration: 1200,
})
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html>