Jump to content

retain Collapsible state on page refresh


Recommended Posts

Hello,

I'm trying to update a rather basic site I've written, it's intended to be rather basic, however i can't for the life of me figure out how to retain the state of the collapsible on browser refresh.

Any pointers would be helpful, although i feel i may just be being stupid!

I did a rather lengthy researching exercise and came up with all sorts of contradicting information and suggestions, some refer to writing cookies, so writing to the local storage and others embedding the state directly into the JS.

Whichever is simplest would be ideal, but I'm slightly confused as to which i should be looking into.

Thanks,

HTML:

<!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 Tickets</button>
<div class="content">
  <p>
    
  <img src="Image1.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="Image2.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="Image3.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>PersonA</th><th>PersonB</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>PersonC</th></tr></table>
  </div>
 </div>
<script src="js.js"></script>
</body>
</html>

ChromeCSS:


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

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";
    }
  });
}

 

 

 

Link to post
Share on other sites

Cookie and local storage is the way to go! Difficulty is the same, everytime a button is clicked you store the current state the element becomes. When you leave and return to a page, you wait till page is fully loaded, check if storage  is not empty and retrieve current status value and then target the element to match the stored value.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...