f



How to keep current state of js accordion after postback?

I am using code from here - http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate. 

How can I keep an opened panel open after a page refresh? People on stackoverflow were saying to do it through cookies but I don't know how to write the script for that. Tia

<!DOCTYPE html>
<html>
<head>
<style>
button.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;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
</style>
</head>
<body>

<h2>Animated Accordion</h2>

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

<button class="accordion">Section 3</button>
<div id="foo" 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>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

</body>
</html>
0
cboguse
11/21/2016 8:20:32 PM
comp.lang.javascript 38370 articles. 0 followers. javascript4 (1315) is leader. Post Follow

3 Replies
567 Views

Similar Articles

[PageSpeed] 19
See related articles to this posting 


localStorage any help?

http://www.w3schools.com/html/html5_webstorage.asp
0
Richard
11/21/2016 10:43:37 PM 
Richard Maher <maher_rjSPAMLESS@hotmail.com> wrote on 21 Nov 2016 in 
comp.lang.javascript:

> localStorage any help?
> 
> http://www.w3schools.com/html/html5_webstorage.asp

Please uote qhat you are responding on.

Usenet is NOT email.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
0
Evertjan
11/22/2016 2:24:09 PM 
cboguse@gmail.com wrote on 21 Nov 2016 in comp.lang.javascript:

> How can I keep an opened panel open after a page refresh?

A page refresh should result in a new page.

Depending on what you mean by 'panel',
you can only give the **illusion** of it staying open.

btw, how do you open such a 'panel' in the first place??

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
0
Evertjan
11/22/2016 2:27:06 PM
Reply: