0

I have the following code that slideToggle() a div while at the same time displaying a button that allows you to slideToggle() back and then hides itself. 

$(document).ready(function() {

$("#about-user-widget .hide-btn").click(function(){
    $("#about-user-widget").slideToggle();
    $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');
});
//reverses the above action
$("#show-button").click(function(){
    $("#about-user-widget").slideToggle();
    $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: none;');
});
})

The above works great, however when I refresh the page it goes back to the default. The about-user-widget is open and the show-button visibility is set to hidden.

My question is, how would I get the page reload to remember what my settings are at? So for example, if one had clicked hide, and the about-user-widget was hidden and the show-button was visible. How could I get that setting to stay when the page is refreshed?

The show-button is set to hidden by default. 

<div class="pull-right" id="show-button" style="margin-bottom: 5px; font-size: 11px; color: #ddd; visibility: hidden;"><a href="#"><i class="fa fa-eye"></i> Show</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span></div>

I know I'd need to commit this to memory somehow (cookie, local storage of some kind) but being new to jquery I'm not sure how to implement this.

Any help would be appreciated.

1 Answers1

0

First I don't understand why you need two buttons? You can achieve this with one button. As per saving the state of div shown/hidden

You can use storage in cookies or your preferred metnod.

As per cookie; read the following stack post

Then this for example how you can try: I used this plugin: https://github.com/js-cookie/js-cookie

$(document).ready(function() {
    var currentstate = Cookies.get('divstate');

    console.log('on refresh=' + currentstate);
    if (currentstate == 'open')
        $("#about-user-widget").show();
    else
        $("#about-user-widget").hide();


    $("#button").click(function() {
        $("#about-user-widget").slideToggle();
        var currentstate = Cookies.get('divstate');


        if (currentstate == 'close' || currentstate == undefined) {
            Cookies.set('divstate', 'open');
            console.log('when click');

        } else {
            Cookies.set('divstate', 'close');
            console.log('else');

        }

        console.log(Cookies.get('divstate'));
    });


});

the HTML part:

<input id="button" type="button" value="show/hide" />
<div id="about-user-widget" style="display: none; width: 100px; height: 100px; background: #b2000b">some text</div>

Be aware about cookies plugin's compatibility with browsers; I tested with FireFox and working.

WPDev
  • 161
  • 9
  • The first button `.hide-btn` is actually on the `div` that toggles so IOW it toggles out of view. Just above that I have the `show-button` appearing so we can toggle back. –  May 06 '18 at 20:21
  • Anyhow, my example is generic answer so others also can use it; please feel free to amend and use for your application; if you need further clarification feel free so I improve. – WPDev May 07 '18 at 21:17