I have a list with active 6 items. If click on "More cases" I get the next 3 active items and I try to save active states of all next items to sessionStorage. For example I added sessionStorage into the click but it saved object like string and I don't figure out how to do it better with list
My example:
var total = 6;
var cases = $(".cases__item").length;
$('.cases__item:lt(' + total +')').addClass("active").show();
$('#morecases').click(function () {
total += 3;
if (total <= cases) {
$('.cases__item:lt(' + total + ')').addClass('active').show()
} else {
$('.cases__item:lt(' + total + ')').addClass("active").show();
$('#morecases').hide();
}
});.cases__item {display: none}
.cases__item.active {display: block}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cases">
<a class="cases__item active" href="/">Item 1</a>
<a class="cases__item active" href="/">Item 2</a>
<a class="cases__item active" href="/">Item 3</a>
<a class="cases__item active" href="/">Item 4</a>
<a class="cases__item active" href="/">Item 5</a>
<a class="cases__item active" href="/">Item 6</a>
<a class="cases__item" href="/">Item 7</a>
<a class="cases__item" href="/">Item 8</a>
<a class="cases__item" href="/">Item 9</a>
<a class="cases__item" href="/">Item 10</a>
<a class="cases__item" href="/">Item 11</a>
<a class="cases__item" href="/">Item 12</a>
</div>
<a href="#" id="morecases">more Cases</a>you need to add your object as a string in session storage.
sessionStorage.setItem('user', JSON.stringify(user));
Here the user is your array or object.