默认情况下，如何使所有手风琴在浏览器中打开并在移动视图中关闭？

Question

I'm editing accordions according to my requirements, as the accordions are closed by default. I want it to be opened by default in desktop browser and keep closed on mobile browser. HTML, CSS and JS code are bellow. I'm sure you are clear about my requirements.

HTML code:

<div class="rightSideAccor">
  <button class="loginAccordion">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>
</div>

Style sheet CSS:

.rightSideAccor {
    float: left;
    width: 356px;
    height: auto;
    margin-top: 120px;
    padding: 5px;
}
.loginAccordion {
    opacity: .8;
  background-color: #1e1b1a;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #1e1b1a;
}
.loginAccordion:after {
  content: '\02C5';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\02C4";
}
.panel {
  opacity: .8;
  padding: 0 18px;
  background-color: #1e1b1a;
  color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

JS Code:

<script>
  var acc = document.getElementsByClassName("loginAccordion");
  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";
      } 
    });
  }
</script>

Answer 1

Here I write a solution. You need to add a class name to your accordion. I named the class accordion and trigger the click event by this class. Here I assume max mobile width is 500px . You can change it.

 var acc = document.getElementsByClassName("loginAccordion"); 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"; } }); } //suppose the max width of mobile is 500px if (screen.width > 500) { var accordion = document.getElementsByClassName('accordion'); Object.keys(accordion).forEach(el => { accordion[el].click(); }); }

 .rightSideAccor { float: left; width: 356px; height: auto; margin-top: 20px; padding: 5px; } .loginAccordion { opacity: .8; background-color: #1e1b1a; color: #fff; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #1e1b1a; } .loginAccordion:after { content: '\\02C5'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\02C4"; } .panel { opacity: .8; padding: 0 18px; background-color: #1e1b1a; color: #fff; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div class="rightSideAccor"> <button class="accordion loginAccordion">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> </div>