Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Style the element that is used to open and close the accordion class */
- div.accordion {
- background-color: #fff;
- color: #444;
- cursor: pointer;
- padding: 0px;
- width: 100%;
- text-align: left;
- border: none;
- outline: none;
- transition: 0.4s;
- margin-bottom:10px;
- opacity: 0.70;
- filter: alpha(opacity=70);
- }
- /* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
- div.accordion.active, div.accordion:hover {
- background: rgb(255,255,255);
- background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(232,231,222,1) 50%, rgba(255,255,255,1) 100%);
- opacity: 1;
- filter: alpha(opacity=100);
- }
- /* Style the element that is used for the panel class */
- div.panel {
- padding: 0 18px;
- background-color: white;
- max-height: 0;
- overflow: hidden;
- transition: 0.4s ease-in-out;
- opacity: 0;
- margin-bottom:10px;
- }
- div.panel.show {
- opacity: 1;
- max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
- }
- <script>
- document.addEventListener("DOMContentLoaded", function(event) {
- var acc = document.getElementsByClassName("accordion");
- var panel = document.getElementsByClassName('panel');
- for (var i = 0; i < acc.length; i++) {
- acc[i].onclick = function() {
- var setClasses = !this.classList.contains('active');
- setClass(acc, 'active', 'remove');
- setClass(panel, 'show', 'remove');
- if (setClasses) {
- this.classList.toggle("active");
- this.nextElementSibling.classList.toggle("show");
- }
- }
- }
- function setClass(els, className, fnName) {
- for (var i = 0; i < els.length; i++) {
- els[i].classList[fnName](className);
- }
- }
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement