Open accordion on page load / But leave it close on mobile view

jquery accordion open first by default
bootstrap accordion
wordpress accordion default closed
accordion with open close arrows css
simple jquery accordion
html accordion without css
html accordion generator
accordion ui

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>

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>

Dreamweaver CS3: The Missing Manual: The Missing Manual, Unlike tabbed panels and accordions, a collapsible panel is just a single tab/​panel First, you don't have to have a panel open when the page loads. A visitor clicks the tab of one panel, and it opens, leaving the other collapsible The Display menu controls only whether the panel is opened or closed in Design view. if you want to keep active/open an accordion you can select “Is active” option under “Accordion content” each section. View post on imgur.com. And set the option “Keep expanded others” to “Yes” View post on imgur.com. And then refresh your accordion page, make sure you clear browser cache. View post on imgur.com

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

Dreamweaver CS6: The Missing Manual, PaNelS Figure 13-7 You open and close a collapsible panel by clicking the icons control whetherthe panelis open orclosed only in Dreamweaver's Design view. over an accordion: First, you don't have to have a panel open when the page loads—you can have three collapsible panels on a page with all three closed. 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.

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>

Accordion, Description When Accordion is first displayed at page load, the first element is always open - would like a setting so all can be closed when page loads. arielk Updated to 1.8.1 and don't see an option for all closed at start. of display of the first, open, accordion item, leaving only the closed ones visible. Hello all, I would like to have all the accordion div's CLOSED onload, but cannot figure out how. Here is my code: jQuery().ready(function(){ // simple accordion jQuery('#list').accordion

Ability to choose which accordion row is open by default, not just first , I'd like to be able to choose which accordion row opens first, not just the first one. basic site description, and ideally that would come first in the page so it doesn't get. Closed (fixed). Project: Views Accordion. Version: 6.x-1.x-dev <a href="/​my-accordion-page#A4">Open the 5th tab on page load</a>. hi, in my mvc razor view, I have many accordions, I want them to be collapsed when the page loaded until user click the accordion to expand it. I have the code of this, but it does not work. any id

W3.CSS Accordions, CSS Versions W3.CSS Mobile Click on the "Open Section" buttons below to see how accordions work: Open Section 1 Use any kind of button to open and close the content: We prefer a button with a w3-block class, to span the entire width of the page (100% width). Remember that buttons Left aligned and full-​width. Is there a way to get the first item in the accordion to be open on page load rather than hiding all? simple jquery accordion. to close all the tabs ONLY in

Collapsed Accordions on Page Load, Instead, I got: The first accordion is always open Load the Fron End, now you should see all accordions closed, and on click, each accordion  To make an animated accordion, add max-height: 0, overflow: hidden and a transition for the max-height property, to the panel class. Then, use JavaScript to slide down the content by setting a calculated max-height , depending on the panel's height on different screen sizes:

Comments
  • Thank you, this is exactly what I was looking for! If anyone knows where we can find resources to better understand js logic, please leave a link :)