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();
});

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();
});

• javascript
• jquery
• html

• 4 use sessionStorage – Kartikeya Khosla Commented May 31, 2016 at 6:38
• 1 @KartikeyaKhosla, thanks i'll try that. – claudios Commented May 31, 2016 at 6:39

3 Answers 3

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/

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);
});

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);
       });
   });