Preserve present condition following a jQuery click event

Question

Preserve present condition following a jQuery click event

I'm facing a challenge where I need to hide a button upon clicking another button, but the problem is that when the page refreshes, the hidden button becomes visible again. My objective is to keep it hidden even after refreshing the page and only reveal it when the show button is clicked. Any assistance with this matter would be greatly appreciated.

Here's the HTML code:

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

And here's the JavaScript code:

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

javascript jquery html

Answer 1

Answer №1

As @JohnDoe suggested, implementing a local storage solution will solve the issue.

To accomplish this, simply set the localStorage value when the button is clicked. Then, on page load, you can check the localStorage value to determine whether the button should be visible or not.

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

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

// Since `toggle` requires a boolean value and localStorage stores values as strings
var isVisible = localStorage.getItem('visibility') === 'false' ? false : true;
$('.link').toggle(isVisible);

You can find a working example of this implementation here: https://jsfiddle.net/1m3rnj2b/

Answer 2

As @JohnDoe suggested, implementing a local storage solution will solve the issue.

To accomplish this, simply set the localStorage value when the button is clicked. Then, on page load, you can check the localStorage value to determine whether the button should be visible or not.

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

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

// Since `toggle` requires a boolean value and localStorage stores values as strings
var isVisible = localStorage.getItem('visibility') === 'false' ? false : true;
$('.link').toggle(isVisible);

You can find a working example of this implementation here: https://jsfiddle.net/1m3rnj2b/

Answer 3

Answer №2

To manage this, you can utilize the power of browser storage. Consider implementing the following code snippet on the client-side using localStorage or alternatively, if it suits your needs, use sessionStorage in your server script.

if(localStorage.getItem('isHidden')) {
  $('.link').hide();
}

$('.showHideButton').click(function(){
  $('.link').hide();
  localStorage.setItem('isHidden', true);
});

Answer 4

To manage this, you can utilize the power of browser storage. Consider implementing the following code snippet on the client-side using localStorage or alternatively, if it suits your needs, use sessionStorage in your server script.

if(localStorage.getItem('isHidden')) {
  $('.link').hide();
}

$('.showHideButton').click(function(){
  $('.link').hide();
  localStorage.setItem('isHidden', true);
});

Answer 5

Answer №3

To maintain the button's hidden state even after closing the browser, you should consider utilizing localStorage. You can find more information on this feature here. Alternatively, if you prefer a session-based approach where data is cleared upon closing the browser, I would recommend using sessionStorage. More details about session storage can be found here.

In order to achieve this functionality, two essential functions need to be utilized: getItem and setItem. Here's an example demonstrating their usage with sessionStorage, but it can also be applied to localStorage:

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

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

Answer 6

To maintain the button's hidden state even after closing the browser, you should consider utilizing localStorage. You can find more information on this feature here. Alternatively, if you prefer a session-based approach where data is cleared upon closing the browser, I would recommend using sessionStorage. More details about session storage can be found here.

In order to achieve this functionality, two essential functions need to be utilized: getItem and setItem. Here's an example demonstrating their usage with sessionStorage, but it can also be applied to localStorage:

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

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

Preserve present condition following a jQuery click event

Answer №1

Answer №2

Answer №3

Similar questions

Error encountered in Ubuntu while attempting to run a Python script within a Node.js/Express application: spawn EACCES

Utilizing PHP and Ajax to showcase individual row details within a while loop upon clicking a hyperlink

Is it possible to alter preact-material-components to switch to mdc-theme--dark mode, thereby changing the CSS style of all descendant components?

The return value from vue-query is ObjectRefImpl, not the actual data

Using React and Material-UI to dynamically populate a table with data retrieved from

Footer positioned centrally on screen

Sketch a variety of numerical values in a circular formation

The "hover" effect is not activating on a carousel

Efficiently generating and managing numerous toggle buttons in Reactjs with Material-ui ToggleButtons

Utilizing the closest method to retrieve the form element

Unusual Actions from the Text Field

What is the most effective method for preserving RichText (WYSIWYG output)?

The text sliding feature gradually moves further away from the left side with each iteration

What is the best way to convert a Date into the JSON format before sending it to the database?

When using React hooks forms, setting default values from a reduced array does not automatically populate the form. However, manually entering the same object into the form does

Error: The column 'joinedactivities.searchact id = searchact.id' is not recognized in the 'on clause'

Bringing in functions - NodeJS - non-HTML

Creating HTML code from a template using different programs

Does aoMap function exclusively with THREE.BufferGeometry?

Clicking on a button in the Shield UI Grid Toolbar will apply filters to