How to store collapse in sessionStorage?

Question

I have few collapse and i want to store on localStorage as per user activity. Right now its not working properly. How can i do it?

This is my code:-

 $('p').addClass(sessionStorage.getItem('className')); $('h5').click(function(){ $(this).next('p').toggleClass('active'); window.sessionStorage.setItem('className', 'active'); });

 p{display:none;} p.active{display:block;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h5>collapse 1</h5> <p>This is collapse data</p> <h5>collapse 2</h5> <p>This is collapse data</p> <h5>collapse 3</h5> <p>This is collapse data</p> <h5>collapse 4</h5> <p>This is collapse data</p>

Answer 1

As you want to store which elements the user has collapsed, you could store the index of the H5 in session storage.

To fetch the index within the click() function, use the jQuery index() function:

$('p').index(
  $(this).next('p')
)

To store the click to localstorage:

$('h5').click(function(){
   const paragraphElement = $(this).next('p');
   const elementIndex = $('p').index(paragraphElement);

   paragraphElement.toggleClass('active');
   window.sessionStorage.setItem('collapsed_state_' + elementIndex , 'active'); 
});

Lastly to collapse the elements from sessionStorage, just loop over all the elements and read the index as:

$('p').each(function(index) {
  $(this).addClass(window.sessionStorage.getItem('collapsed_state_' + index));
});

In order to use localStorage , rename window.sessionStorage to window.localStorage

Answer 2

if i understand and you want to store and use as a cache try this code:

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        p {
            display: none;
        }

            p.active {
                display: block;
            }
    </style>

</head>
<body>
    <h5 id="collapse1">collapse 1</h5>
    <p class="collapse1">This is collapse data</p>

    <h5 id="collapse2">collapse 2</h5>
    <p class="collapse2">This is collapse data</p>

    <h5 id="collapse3">collapse 3</h5>
    <p class="collapse3">This is collapse data</p>

    <h5 id="collapse4">collapse 4</h5>
    <p class="collapse4">This is collapse data</p>

    <script>
        var classOpen = sessionStorage.getItem('className');

        $('p.' + classOpen).addClass('active');

        $('h5').on("click", function () {
            $('p').removeClass('active');

            $(this).next('p').toggleClass('active');

            var idKey = $(this).attr("id");

            window.sessionStorage.clear();
            window.sessionStorage.setItem('className', idKey);
        });
    </script>
</body>
</html>

I hope this help you Regards

How to store collapse in sessionStorage?

Question

2 answers

solution1
1 2020-02-09 20:28:16

solution2
1 2020-02-09 20:50:01

How to store collapse in sessionStorage?

Question

2 answers

solution1 1 2020-02-09 20:28:16

solution2 1 2020-02-09 20:50:01

solution1
1 2020-02-09 20:28:16

solution2
1 2020-02-09 20:50:01