Jump to content

Collapsible state save on refresh


newqqq

Recommended Posts

Hello,

I'm creating a rather basic page, simply to show some charts, and I'd like the page to refresh at certain intervals retaining the state of the collapsible. It doesn't matter if it doesn't auto refresh as i can do this by other means, but I'd like the collapsible to remain expanded if it was when the refresh option is hit.

 

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css.css">
  <link href="chrome.css" rel="stylesheet" type="text/css">
</head>
<body>
<button type="button" class="collapsible">Show ALL</button>
<div class="content">
  <p>
    
  <img src="Sheet1_ALL TICKET STATES.JPG" alt="ALL TICKETS" class="center">
  
 </p>
</div>
<button type="button" class="collapsible">Show Tickets without Sick/Leave</button>
<div class="content">
  <p>
    
  <img src="Sheet1_TICKET STATES for people IN.JPG" alt="PEOPLE IN TICKETS" class="center">
  
 </p>
 </div>
</div>
<button type="button" class="collapsible">Show Just InProgress/Open without Sick/Leave</button>
<div class="content">
  <p>
    
  <img src="Sheet1_IN PROGRESS FOR THOSE IN (Ordered by ALL Tickets total).JPG" alt="PEOPLE IN ACTIVE TICKETS" class="center">
  
 </p>
 </div>
</div>
<button type="button" class="collapsible">Show Who's Absent</button>
<div class="container">
     <div class="row"><div class="col-sm-6"><table id="t01" class="table" style="float: left; width: 50%;border: solid black 1px;"><tr><th>Sick</th><th>Person3</th><th>Person4</th></tr></table>
 </div>
 <div class="col-sm-6"><table id="t02" class="table" style="float: left; width: 50%;border: solid black 2px;"><tr><th>Leave</th><th>PersonA</th><th>PersonB</th></tr></table>
  </div>
 </div>
<script src="js.js"></script>
</body>
</html>

Chrome CSS:

@charset "utf-8";
/* CSS Document */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 86%;
}

CSS CSS:

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #ADD8E6;
  line-height: 2.5em;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 15px;
  text-align: left;
  border-spacing: 5px;
}
#table tr:nth-child(even) {
  background-color: #eee;
}
#table tr:nth-child(odd) {
  background-color: #fff;
}
#table th {
  color: white;
  background-color: black;
}
#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: Black;
  background-color: White;
  text-align: center; 
  vertical-align: middle;


}
#t02 th {
  color: white;
  background-color: Teal;
  text-align: center; 
  vertical-align: middle;
}

* {
  box-sizing: border-box;
}

/* Create a two-column layout */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

JS: 


var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Any help or pointers would be much appreciated...

Or am i being dumb here....

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...