打开手风琴页面加载/但在移动视图上保持关闭

Question

I'm trying to have this accordion open in desktop view (on page load), but close in mobile view. Also I want this accordion to react to event on click, which it already does well.

So I'm having trouble having it open by default on desktop view while not in mobile view. Is it possible to make this work only by improving the js file I have here or also changing the css ?

Any help welcome for this task, I'm ok with css but little knowledge in js.

 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"; } }); } 

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <button class="accordion">Section 1</button> <div class="panel"> <p>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.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>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.</p> </div> 

Answer 1

You can consider a media query to set the max-height for big devices in order to have the accordion opne then adjust your JS code like below:

 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 (window.getComputedStyle(panel,null).getPropertyValue("max-height") !== "0px"){ panel.style.maxHeight = "0px"; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } 

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0px; overflow: hidden; transition: max-height 0.2s ease-out; } @media (min-width:600px) { .panel { max-height:500px; } .accordion:after { content: '\\2212'; } .active:after { content: "\\002B"; } } 

 <button class="accordion">Section 1</button> <div class="panel"> <p>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.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>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.</p> </div> 

Answer 2

This solution using Javascript.

    If(window.innerWidth <= 768){
    this.classList.add("active");
    }

and this if you want to use JQuery

   // Returns width of browser viewport
   if($( window ).width() > 768){
   //If you want to add dynamically a class or remove one
   $('.selector').addClass(); // or removeClass()
   }

I hope this could help you

Answer 3

If you want to do it through JS, you can make use of Window.matchMedia :)

 window.onload = ()=>{ 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"; } }); } // our media query string let mql = window.matchMedia("screen and (min-width: 1281px)"); mediaQueryResponse(mql); // call the event handler at run time // listen for state changes mql.addListener(mediaQueryResponse); function mediaQueryResponse(mql){ for(let i = 0; i < acc.length; i++){ let pan = acc[i].nextElementSibling; if(mql.matches){ acc[i].classList.toggle('active'); pan.style.maxHeight = pan.scrollHeight + "px"; } else { pan.style.maxHeight = null; } } } } 

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <button class="accordion">Section 1</button> <div class="panel"> <p>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.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>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.</p> </div> 

Also, here's a working example :)