<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div>
<a href="#" id="slide1">Slide Toggle 1 <span>+</span></a>
<div id="slide1panel"></div>
</div>
<div>
<a href="#" id="slide2">Slide Toggle 2 +</a>
<div id="slide2panel" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
</div>
a{text-decoration:none; font-size:2em;}
$(document).ready(function() {
// check the cookies when the page loads
// 1st panel
if ($.cookie('currentToggleslide1panel') === 'visible') {
togglePanel($('#slide1panel'), $('#slide1'), 0);
}
// 2nd panel
if ($.cookie('currentToggleslide2panel') === 'visible') {
togglePanel($('#slide2panel'), $('#slide2'), 0);
}
//handle the clicking of the show/hide toggle button of the 1st panel
$('#slide1').click(function() {
//toggle the panel as required
togglePanel($('#slide1panel'), $('#slide1'), 'slow');
});
//handle the clicking of the show/hide toggle button of the 2nd panel
$('#slide2').click(function() {
//toggle the panel as required
togglePanel($('#slide2panel'), $('#slide2'), 'slow');
});
});
function togglePanel(panel, button, toggleSpeed) {
var panelPreviousStateVisible = panel.is(':visible');
// Toggle the div
if (toggleSpeed > 0 || toggleSpeed === 'slow' || toggleSpeed === 'fast') {
panel.slideToggle(toggleSpeed);
} else {
panel.toggle();
}
// Once toggled, set the cookie and the text
if (!panelPreviousStateVisible) {
$.cookie('currentToggle' + panel.attr('id'), 'visible', { path: '/' });
// Set the text by removing the last char and add a minus symbol
button.text(button.text().slice(0,-1) + "-");
} else {
$.cookie('currentToggle' + panel.attr('id'), 'hidden', { path: '/' });
// Set the text by removing the last char and add a plus symbol
button.text(button.text().slice(0,-1) + "+");
}
}
