0

I have a button that hide and show html div

<button id="hideshow" title="Click to Show/Hide Assessment"></button>

This is the script

$(document).ready(function(){ /// hide and show button
    $('#hideshow').click(function() {
        $('#containerDiv1').toggle("slideLeft");
        $("i", this).toggleClass("fas fa-lg fa-chevron-up fas fa-lg fa-chevron-down");
    });
});

Now I want to achieve is when the user choose to hide the div and click the button, when he reload the page it should be still hide. Because by default my div is on show when my webpage is open.

any help??

0

2 Answers 2

4

Use sessionStorage, localStorage or a cookie to persist the state, then retrieve and restore it on page load. This does require some work, but the flickering of the UI is free ;)

This shows the principle:

$(document).ready(function(){ /// hide and show button
    const containerState = localStorage.getItem('containerDiv1');
    switch (containerState) {
      case 'visible':
        // your code for when the user last saw it "visible"
        break;
      case 'hidden':
        // your code for when the user last saw it "hidden"
        break;
      default:
        // any action that should take place when containerState is empty (not set, never clicked)
    }
    $('#hideshow').click(function() {
        $('#containerDiv1').toggle("slideLeft");
        $("i", this).toggleClass("fas fa-lg fa-chevron-up fas fa-lg fa-chevron-down");
        // on every click, store the current visibility state in localStorage
        localStorage.setItem('containerDiv1', $('#containerDiv1:visible').length ? 'visible' : 'hidden');
    });
});
3
  • this seems to be appropriate. Else u can send a flag from server with GET or POST request which will maintain the div visibility. Jul 11, 2019 at 7:07
  • @connexo There is an issue, when i click the button it always store in local as visible.. how would it change to hidden?
    – Gelxxxx
    Jul 11, 2019 at 7:21
  • $('#containerDiv1:visible').length should tell you that, but I don't know how you show and hide that container internally. You need to find that out by yourself. If the element has display: none; then, you could use window.getComputedStyle(document.querySelector('#containerDiv1')).display === 'none' ? 'hidden' : ' visible';.
    – connexo
    Jul 11, 2019 at 7:48
0

following connexo's answer,

$('#containerDiv1").css('display')=== 'none' ? 'hidden' : ' visible'

should work

2
  • @flyfish ... Welcome to SO. What do you mean by "should work" ? Have you tried it? Does it work or not? Please remember, your answer should be an actual resolution to the problem submitted, not merely a guess. Finally, explain why the OP should use this code and how it answers the original question.
    – Kuya
    Jul 12, 2019 at 6:22
  • Gelxxxx used jQuery in his code, so it's easy to use jQuery to get element's display value for localStorage date item. I should say if he hides the div by setting display: none, this line of code $('#containerDiv1").css('display')=== 'none' ? 'hidden' : ' visible' works
    – flyfish
    Jul 12, 2019 at 6:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.