There's a list of items with a "change view" option for grid, list, and compact views. By default, the grid view is displayed when the user opens the link (which has already been achieved). Now, my goal is to remember the user's choice of view so that when they click on list view and return to the page later, it will display the last chosen view. Check out the JSFiddle here
My code:
$('li').on('click', function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('compact').addClass('grid');
}
if ($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
if ($(this).hasClass('list')) {
$('#container ul').removeClass('compact').addClass('list');
}
if ($(this).hasClass('compact')) {
$('#container ul').removeClass('list').addClass('compact');
} else if ($(this).hasClass('compact')) {
$('#container ul').removeClass('grid').addClass('compact');
}
});
$('document').ready(function() {
$('.menu li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide();
$div.slideToggle();
});
});.menu ul li button:hover {
background-color: rgba(206, 0, 0, 1);
}
.active {
background-color: rgba(30, 30, 30, 1);
}
#container ul {
list-style: none;
}
#container .buttons {
margin-bottom: 20px;
}
#container .list li {
width: 100%;
border-bottom: 1px dotted #CCC;
margin-bottom: 10px;
padding-bottom: 10px;
}
#container .grid li {
float: left;
width: 20%;
height: 50px;
border-right: 1px dotted #CCC;
border-bottom: 1px dotted #CCC;
padding: 20px;
}
#container .compact li {
float: left;
width: 30%;
height: 50px;
border-right: 1px dotted #CCC;
border-bottom: 1px dotted #CCC;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li class="grid"> <a href='#' id="show2">Grid</a></li>
<li class="list"> <a href='#' id="show3">List</a></li>
<li class="compact"> <a href='#' id="show1">Compact</a></li>
</ul>
</div>
<div id="container">
<ul class="grid">
<li>Item 2</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
<div>
</div>