Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #31734 > unrolled thread

How to keep current state of js accordion after postback?

Back to article view | Back to comp.lang.javascript

Contents

  How to keep current state of js accordion after postback? cboguse@gmail.com - 2016-11-21 12:20 -0800
    Re: How to keep current state of js accordion after postback? Richard Maher <maher_rjSPAMLESS@hotmail.com> - 2016-11-22 06:43 +0800
      Re: How to keep current state of js accordion after postback? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-11-22 15:24 +0100
    Re: How to keep current state of js accordion after postback? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-11-22 15:27 +0100

#31734 — 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>

[toc] | [next] | [standalone]

#31735

localStorage any help?

http://www.w3schools.com/html/html5_webstorage.asp

[toc] | [prev] | [next] | [standalone]

#31736

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)

[toc] | [prev] | [next] | [standalone]

#31737

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)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web