JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<a href="javascript:void(0)" class="bar-toggle">toggle and save state</a>
<div class="container">
</div>
CSS
.container {
background-color: #444;
height: 200px;
width: 200px;
}
.with_toggle {
background-color: #ccc;
}
JavaScript
//need to store initial state or retrieve current state
window.localStorage.toggled = "with_toggle";
/* Toggle */
$('.bar-toggle').on('click',function(){
//localstorage values are always strings (no booleans)
if (window.localStorage.toggled != "with_toggle" ) {
$('.container').toggleClass("with_toggle");
window.localStorage.toggled = "with_toggle";
} else {
$('.container').toggleClass("without_toggle");
window.localStorage.toggled = "without_toggle";
}
});