未加星标

Smooth Accordion With Details Disclosure Element

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

Demo Download

Author: Giana Views Total: 6 Official Page: Go to website Last Update: January 4, 2019 License: MIT Preview:
Smooth Accordion With Details Disclosure Element
Description:

Create a smoothly collapsible accordion using javascript, CSS3 animations, and <details> and <summary> elements.

How to use it:

Code the accordion.

<div class="container collapse"> <details> <summary>Accordion 1</summary> <div class="details-wrapper"> <div class="details-styling"> Details 1 </div> </div> </details> <details> <summary>Accordion 2</summary> <div class="details-wrapper"> <div class="details-styling"> Details 2 </div> </div> </details> <details> <summary>Accordion 3</summary> <div class="details-wrapper"> <div class="details-styling"> Details 3 </div> </div> </details> </div>

The necessary CSS & CSS3 styles for the accordion.

/* Please wrap your collapsible content in a single element or so help me Must add a transition or it breaks because that's the whole purpose of this Only one transition-duration works (see explanation on line #141 in JS) You can add more to an inner wrapper (.details-styling) */ .collapse-init summary + * { transition: all 0.25s ease-in-out; overflow: hidden; } /* Closed state. Any CSS transitions work here The JS has a height calculation to make sliding opened/closed easier, but it's not necessary Remove the height prop for a simple toggle on/off (after all that work I did for you?) */ .collapse-init :not(.panel-active) summary + * { height: 0; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: bottom center; transform-origin: bottom center; } .collapse-init summary { list-style: none; } .collapse-init summary::-webkit-details-marker { display: none; } .collapse-init summary::before { display: none; } .collapse-init summary { cursor: pointer; } etails { background: #fff; border: 1px solid #d6d1e0; border-bottom: 0; list-style: none; } details:first-child { border-radius: 6px 6px 0 0; } details:last-child { border-bottom: 1px solid #d6d1e0; border-radius: 0 0 6px 6px; } summary { display: block; transition: 0.2s; font-weight: 700; padding: 1em; } summary:focus { outline: 2px solid #5b13ec; } .collapse-init summary::after { border-right: 2px solid; border-bottom: 2px solid; content: ''; float: right; width: 0.5em; height: 0.5em; margin-top: 0.25em; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: inherit; } [open] summary { background: #5b13ec; color: #f8f5fe; } [open] summary::after { margin-top: 0.5em; -webkit-transform: rotate(225deg); transform: rotate(225deg); }

Load the details-element-polyfill for IE/Edge support.

<script src="https://cdn.jsdelivr.net/gh/javan/<a href="/cdn-cgi/l/email-protection" data-cfemail="fe9a9b8a9f97928dd39b929b939b908ad38e91928798979292be939f8d8a9b8c">[email protected]</a>/dist/details-element-polyfill.js"></script>

The primary JavaScript for the accordion.

var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}miscPolyfillsForIE(); // main function Collapse = function () { function Collapse(container) {var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};_classCallCheck(this, Collapse); var defaults = { accordion: false, initClass: 'collapse-init', activeClass: 'panel-active', heightClass: 'collapse-reading-height' }; this.settings = Object.assign({}, defaults, options); this._container = container; this._panels = container.querySelectorAll("details"); this.events = { openingPanel: new CustomEvent('openingPanel'), openedPanel: new CustomEvent('openedPanel'), closingPanel: new CustomEvent('closingPanel'), closedPanel: new CustomEvent('closedPanel') }; } // Sets height of panel content _createClass(Collapse, [{ key: '_setPanelHeight', value: function _setPanelHeight(panel) { var contents = panel.querySelector("summary + *"); contents.style.height = contents.scrollHeight + "px"; } // Removes height of panel content }, { key: '_removePanelHeight', value: function _removePanelHeight(panel) { var contents = panel.querySelector("summary + *"); contents.style.height = null; } //=== Open panel }, { key: 'open', value: function open(panel) { panel.dispatchEvent(this.events.openingPanel); panel.open = true; } // Add height and active class, this triggers opening animation }, { key: '_afterOpen', value: function _afterOpen(panel) { this._setPanelHeight(panel); panel.classList.add(this.settings.activeClass); } // Remove height on animation end since it's no longer needed }, { key: '_endOpen', value: function _endOpen(panel) { panel.dispatchEvent(this.events.openedPanel); this._removePanelHeight(panel); } //=== Close panel, not toggling the actual [open] attr! }, { key: 'close', value: function close(panel) { panel.dispatchEvent(this.events.closingPanel); this._afterClose(panel); } // Set height, wait a beat, then remove height to trigger closing animation }, { key: '_afterClose', value: function _afterClose(panel) {var _this = this; this._setPanelHeight(panel); setTimeout(function () { panel.classList.remove(_this.settings.activeClass); _this._removePanelHeight(panel); }, 100); //help, this is buggy and hacky } // Actually closes panel once animation finishes }, { key: '_endClose', value: function _endClose(panel) { panel.dispatchEvent(this.events.closedPanel); panel.open = false; } //=== Toggles panel... just in case anyone needs this }, { key: 'toggle', value: function toggle(panel) { panel.open ? this.close(panel) : this.open(panel); } //=== Accordion closes all panels except the current passed panel }, { key: 'openSinglePanel', value: function openSinglePanel(panel) {

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Smooth Accordion With Details Disclosure Element
本站链接:https://www.codesec.net/view/628599.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(503)