After extensive searching, I couldn't find exactly what I needed. Therefore, I decided to utilize cookies to remember the toggled state of a div whether it's hidden or visible. However, I encountered an issue where there is flicker happening as the div transitions from its default state to the state based on the cookie when a page refresh occurs or when navigating to a different link. My task now is to investigate if there is a way to eliminate this flicker without using server-side code.
Below is the HTML structure:
<html>
<head>
<title></title>
<meta name="charset" content="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="app.js"></script>
<! -- getCookie() and setCookie() are loaded from app.js -->
</head>
<body>
<nav>
<ul class="list-unstyled">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
</ul>
</nav>
<a href="#" class="buttonCollapse" id="btn-close"><span class="arrow">«</span> </a>
<a href="#" class="buttonCollapse-open" id="btn-open"> <span class="arrow">»</span> </a>
<div class="container side-nav">
<h1>SideBar that has to hide on click</h1>
</div>
<div id="wrapper" class="main">
<h1>Main Content</h1>
</div>
</body>
</html>Here is the corresponding CSS:
body {
position: relative;
}
.container {
margin: 20px 20px;
width: 200px;
height: 500px;
background: #ccc;
display: inline-block;
}
.hideSideNav .side-nav {
display: none;
}
.hideSideNav #wrapper {
padding-left: 20px;
}
.main {
width: 500px;
height: auto;
background-color: #f9f9f9;
display: inline-block;
position: relative;
margin: 0 auto;
}
.buttonCollapse {
font-size: : 25px;
text-decoration: none;
position: absolute;
left: 200px;
margin-right: 7px;
margin-top: 5px;
z-index: 10000;
opacity: 1;
text-decoration: none;
}
.buttonCollapse-open {
font-size: : 25px;
text-decoration: none;
position: absolute;
left: 20px;
top: 30px;
z-index: 10000;
display: none;
}
.buttonCollapse:hover,
.buttonCollapse-open:hover {
text-decoration: none;
}
span.arrow {
font-size: 25px;
}Lastly, here are the getCookie(), setCookie(), and deleteCookie() functions for your reference, sourced from app.js:
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toUTCString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}Additionally, below is my JavaScript code which I load in a script tag immediately after the body tag:
if (localStorage.getItem('State')) {
document.body.classList.add('hideSideNav');
} else {
document.body.classList.remove('hideSideNav');
}And here is the remaining JavaScript logic:
var btnOpen = "btn-open";
var btnClose = "btn-close";
function showElement(elemid) {
if (elemid != null) {
document.getElementById(elemid).style.display = "inline-block";
if (elemid == btnClose) {
document.getElementById(btnOpen).style.display = "none";
document.body.classList.remove('hideSideNav');
[0].classList.remove('hideSideNav');
} else if (elemid == btnOpen) {
document.getElementById(btnClose).style.display = "none";
document.body.classList.add('hideSideNav');
}
}
}
function checkCookie() {
var cookieName = getCookie("State");
var getStatus = (localStorage.getItem('State')) ? localStorage.getItem('State') : getCookie('State');
if (cookieName != null) {
showElement(getStatus);
}
}
window.onload = function() {
checkCookie();
}
var doc = document;
var openBtn = doc.getElementById('btn-open');
var closeBtn = doc.getElementById('btn-close');
closeBtn.addEventListener('click', function() {
document.body.classList.add('hideSideNav');
closeBtn.style.display = "none";
openBtn.style.display = "inline-block";
setCookie("State", "btn-open");
localStorage.setItem('State', 'btn-open');
});
openBtn.addEventListener('click', function() {
document.body.classList.remove('hideSideNav');
openBtn.style.display = "none";
closeBtn.style.display = "inline-block";
deleteCookie('State');
localStorage.removeItem('State');
});