CODEWITHSUNDEEP
jqueryhtmlcssbutton
Zachary
Zachary

Reputation: 21

How can I maintain page state after navigating away and back again?

I have created a button that extends the Read More section. This works fine.

// CODE TO EXTEND READ MORE SECTION
$("#readMoreDiary").on("click", function(){

    $("#diary-content").addClass("showTextThree");
    $("#readMoreDiary").addClass("hide");
    $("#closeDiary").removeClass("hideExitDiary");

    $(".showTextThree").addClass("animated fadeIn");
    $(".showTextThree").one("animationend",function(){

        $(this).removeClass("animated fadeIn");
    });
});

While coming back from page2.php to the index page, I would like this "Read more" section to remain open. (page2.php will be accessed from the Read More section.)

So if somebody is looking in the Extended Read More section clicks a link for page2 and then goes back, I want to go back to index page but with the Read More Section extended.

How can I solve this problem?

Upvotes: 1

Views: 265

Answers (1)

anurag
anurag

Reputation: 2246

One possible solution, as it seems you need to maintain states. Use Localstorage, to set a flag when you transition from home to page2, and while transitioning back from page2 to home, unset the flag. Check for the flag, and show the "EXTENDED VERSION"

<script type="text/javascript">
$(document).ready(function(){
    var ls = $.localStorage;
    var flag = ls.get("flag_show");

    if( flag != null && flag == true ) {
        $("#diary-content").addClass("showTextThree");
        $("#readMoreDiary").addClass("hide");
        $("#closeDiary").removeClass("hideExitDiary");

        // UNSET THE FLAG IF YOU DON'T NEED TO MAINTAIN STATES
        ls.remove("flag_show");
    }

    $("#readMoreDiary").on("click", function(){
         // your code here
         // SET THE FLAG IN LOCALSTORAGE
         ls.set("flag_show", true);
     });
});


</script>

Use jQuery's LocalStorage API from here

Upvotes: 1

Related Questions