How can I show a div which has a particular classname="show" which are in loop on page reload. In below code by onclick I'm adding class 'show' to div which has classname 'wrapper' through jquery and it generates class as 'wrapper show' to div. Now I want this div <div >.....<div> to be displayed exactly same even after page reload.

<div id="data">
    <div class="wrapper" id="a">AAA</div>
    <div class="wrapper" id="b">BBB</div>
    <div class="wrapper" id="c">CCC</div>
    <div class="wrapper" id="d">DDD</div>
</div>

<div id="main">
    <a href="#a">aaa</a>
    <a href="#b">bbb</a>
    <a href="#c">ccc</a>
    <a href="#d">ddd</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

    jQuery(document).ready(function ($) {
        $('.wrapper').hide();
        $('a[href^="#"]').on('click', function (event) {
            $('.wrapper').hide();
            $('.wrapper').removeClass("show");
            var target = $(this).attr('href');
            $('.wrapper'   target).addClass("show");
            $('.wrapper'   target).toggle();

        });
    });

    function trigger() {
        var data = sessionStorage.getItem('clicked');
        if (data == 'true') {
            var element = document.querySelectorAll("#load-data div");
            for (var j = 0; j < element.length; j  ) {
                if (element[j].className == "wrapper show") {
                    //  this.className = ""wrapper show";
                    this.style.display = "block";
                    sessionStorage.setItem('clicked', true);
                }
            }
        }
    }

    window.onload = function () {
        var data = sessionStorage.getItem('clicked');
        if (data == 'true') {
            trigger();
        }
    };
</script>

CodePudding user response：

Session storage is goes away after the page is reloaded, localstorage should be used for persisting data.

 <script>
        jQuery(document).ready(function ($) {
            $('.wrapper').hide();
            $('a[href^="#"]').on('click', function (event) {
                $('.wrapper').hide();
                $('.wrapper').removeClass("show");
                var target = $(this).attr('href');
                $('.wrapper'   target).addClass("show");
                $('.wrapper'   target).toggle();
                localStorage.setItem('item-clicked', target);
            });
            // must be moved from window.onload because it has to wait for jQuery to be ready
            var data = window.localStorage.getItem('item-clicked');
            if (data != null) {
                trigger();
            }
        });
    
        function trigger() {
            var data = window.localStorage.getItem('item-clicked');
            console.log($(data))
            $(data).addClass("show"); // adds the show class
            $(data).toggle(); // toggles the class
        }
    </script>