Looking for some guidance as a javascript/jquery beginner - I am utilizing Bootstrap along with data-toggle and collapse classes to display or hide divs. I have been searching online trying to find a solution that will maintain the state of all divs, whether they are identified by a unique ID or a CLASS, even after page refreshes. I've come across discussions regarding cookies and local storage, but I am open to using either method (although I encountered errors with $.cookie is not a function, so maybe local storage is preferable?).
The problem is that most examples focus on maintaining accordion states, which may not directly apply in my case. I have attempted to tweak various code snippets but have not been successful.
Here is an excerpt from my code:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-danger">
<div data-toggle="collapse" href="#duesoon" style="cursor: pointer;" class="panel-heading">
<font class="panel-title"><span class='glyphicon glyphicon-fire'></span> Top 5 Expiring Tasks</font>
</div>
<div id="duesoon" class="collapse">
<table class="table table-hover table-striped table-condensed">
<thead>
<tr>
<th class='col-md-7'>Name</th>
<th class='col-md-5'>End Date</th>
</tr>
</thead>
<tbody>
<tr style="cursor: pointer;" onclick="document.location = '?action=view&type=project&id=2">
<td><span class='glyphicon glyphicon-triangle-right'></span> Take Out The Trash</td>
<td>Yesterday</td>
</tr>
</tbody>
</table>
</div>
<div data-toggle="collapse" href="#urgency" style="cursor: pointer;" class="panel-heading">
<font class="panel-title"><span class='glyphicon glyphicon-fire'></span> Top 5 Urgent Tasks</font>
</div>
<div id="urgency" class="collapse">
<table class="table table-hover table-striped table-condensed">
<thead>
<tr>
<th class='col-md-7'>Name</th>
<th class='col-md-5'>Priority</th>
</tr>
</thead>
<tbody>
<tr style="cursor: pointer;" onclick="document.location = '?action=view&type=project&id=1">
<td><span class='glyphicon glyphicon-triangle-right'></span> Save the Whales</td>
<td>Critical</td>
</tr>
</tbody>
</table>
</div>
</div>As seen in the code snippet, there's a link or button triggering the show/hide functionality of a div.
View this on JSFiddle too: http://jsfiddle.net/w8psgvaa/2/
I came across this piece of code;
$('.collapse').on('hidden', function() {
// store this.id
}).on('shown', function() {
// delete this.id
});
$(document).ready(function(){
$(".collapse").collapse().each(function(){
if( isStored( this.id ) ) {
$( this ).collapse( 'hide' );
}
});
});
However, it seems incomplete, and some divs start off collapsed (as evident in my example). Any assistance would be greatly appreciated!