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();
});
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);
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);
});
link button. How to show it again?
toggle instead of hide.
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);
});
});
localStorage coz I wanted to hide it forever and just show it back when Clicking show button