CODEWITHSUNDEEP
javascriptjqueryhtml
claudios
claudios

Reputation: 6656

Save current state after jquery click function

I am trying to hide a button after clicking another button but as when the page refreshed, the hidden button shows up again. I wanted to remain it hidden even if I refresh the page and show it only if I click the show button. Any help would be much appreciated.

HTML:

<button type="button" class="showhide">Show / Hide</button>
<button type="button" class="link">Link</button>

JS:

$('.showhide').click(function(){
 $('.link').hide();
});

Upvotes: 9

Views: 9003

Answers (3)

Pimmol
Pimmol

Reputation: 1871

Like @Kartikeya said, use localStorage.

Set it when you click the button. On page load check the value of the localStorage to update the visibility of the button.

$('.showhide').click(function(){
    $('.link').toggle();

    var isVisible = $('.link').is(":visible"); 
    localStorage.setItem('visible', isVisible);
});

// stored in localStorage as string, `toggle` needs boolean
var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$('.link').toggle(isVisible);

https://jsfiddle.net/undm500w/8/

Upvotes: 8

dimlucas
dimlucas

Reputation: 5131

If you want the button to remain hidden even after closing the browser you should consider using localStorage, more on it here, otherwise I suggest going with sessionStorage which is something similar to sessions, that means that everything stored on the session storage will be removed when you close the browser. You can read about the session storage here

Basically there two functions you need to use. The getItem and the setItem. This is a demonstration using the sessionStorage but applies for the localStorage too:

   $(document).ready(function(){
       if(sessionStorage.getItem('isBtnHidden')){
           $('.link').hide();
       }

       $('.link').click(function(){
          $('.link').hide();
          sessionStorage.setItem('isBtnHidden', true);
       });
   });

Upvotes: 3

Niketan Raval
Niketan Raval

Reputation: 479

You can handle it on client end with localStorage by below code. or you need to use sessionStorage at your server script.

if(localStorage.getItem('isHide'))
  $('.link').hide();
$('.showhide').click(function(){
  $('.link').hide();
  localStorage.setItem('isHide',true);
});

Upvotes: 6

Related Questions