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

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: '02B';

    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>

asked Nov 17 '18 at 13:46

Max

286

add a comment |

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: '02B';

    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>

asked Nov 17 '18 at 13:46

Max

286

add a comment |

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: '02B';

    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>

asked Nov 17 '18 at 13:46

Max

286

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: '02B';

    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>

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: '02B';

    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>

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: '02B';

    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>

javascript css accordion

asked Nov 17 '18 at 13:46

Max

286

asked Nov 17 '18 at 13:46

Max

286

asked Nov 17 '18 at 13:46

Max

286

asked Nov 17 '18 at 13:46

Max

286

asked Nov 17 '18 at 13:46

Max

286

add a comment |

3 Answers
3

active

oldest

votes

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: '02B';

    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: "02B";

}



}

<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>

answered Nov 17 '18 at 14:09

Temani Afif

70.8k93877

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 :)

– Max
Nov 17 '18 at 14:20

add a comment |

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

answered Nov 17 '18 at 14:11

Omar Zikry

add a comment |

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: '02B';

    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 :)

edited Nov 17 '18 at 14:37

answered Nov 17 '18 at 14:31

C.RaysOfTheSun

640127

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53351816%2fopen-accordion-on-page-load-but-leave-it-close-on-mobile-view%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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: '02B';

    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: "02B";

}



}

<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>

answered Nov 17 '18 at 14:09

Temani Afif

70.8k93877

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 :)

– Max
Nov 17 '18 at 14:20

add a comment |

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: '02B';

    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: "02B";

}



}

<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>

answered Nov 17 '18 at 14:09

Temani Afif

70.8k93877

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 :)

– Max
Nov 17 '18 at 14:20

add a comment |

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: '02B';

    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: "02B";

}



}

<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>

answered Nov 17 '18 at 14:09

Temani Afif

70.8k93877

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: '02B';

    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: "02B";

}



}

<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>

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: '02B';

    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: "02B";

}



}

<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>

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: '02B';

    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: "02B";

}



}

<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>

answered Nov 17 '18 at 14:09

Temani Afif

70.8k93877

answered Nov 17 '18 at 14:09

Temani Afif

70.8k93877

answered Nov 17 '18 at 14:09

Temani Afif

70.8k93877

answered Nov 17 '18 at 14:09

Temani Afif

70.8k93877

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 :)

– Max
Nov 17 '18 at 14:20

add a comment |

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 :)

– Max
Nov 17 '18 at 14:20

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 :)

– Max
Nov 17 '18 at 14:20

add a comment |

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

answered Nov 17 '18 at 14:11

Omar Zikry

add a comment |

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

answered Nov 17 '18 at 14:11

Omar Zikry

add a comment |

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

answered Nov 17 '18 at 14:11

Omar Zikry

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

answered Nov 17 '18 at 14:11

Omar Zikry

answered Nov 17 '18 at 14:11

Omar Zikry

answered Nov 17 '18 at 14:11

Omar Zikry

answered Nov 17 '18 at 14:11

Omar Zikry

add a comment |

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: '02B';

    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 :)

edited Nov 17 '18 at 14:37

answered Nov 17 '18 at 14:31

C.RaysOfTheSun

640127

add a comment |

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: '02B';

    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 :)

edited Nov 17 '18 at 14:37

answered Nov 17 '18 at 14:31

C.RaysOfTheSun

640127

add a comment |

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: '02B';

    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 :)

edited Nov 17 '18 at 14:37

answered Nov 17 '18 at 14:31

C.RaysOfTheSun

640127

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: '02B';

    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 :)

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: '02B';

    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>

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: '02B';

    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>

edited Nov 17 '18 at 14:37

answered Nov 17 '18 at 14:31

C.RaysOfTheSun

640127

edited Nov 17 '18 at 14:37

answered Nov 17 '18 at 14:31

C.RaysOfTheSun

640127

answered Nov 17 '18 at 14:31

C.RaysOfTheSun

640127

answered Nov 17 '18 at 14:31

C.RaysOfTheSun

640127

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk