JQuery show/hide div toggle stay open after refresh

Question

I have a chat box in the bottom right of my website, that opens and closes no problem. It is hidden by default, and then when you click on "chat" it stays open! My problem is that I would want the chatbox to stay open when a user changes pages until they decide to minimize it again. At the moment, if you change pages the chatbox minimizes itself. Can someone help?

jQuery(document).ready(function() {
  jQuery('#hideshow').on('click', function(event) {
    jQuery('#initiallyHidden').toggle('show');
  });
});

#chatbox {
  position: fixed;
  bottom: 0;
  right: 0;
  float: right;
}

#initiallyHidden {
  bottom: 100;
  right: 0;
  float: right;
  width: 300px;
  height: 200px;
  border-style: solid;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox"><input type="button" id="hideshow" value="Quick Chat" class="tbox" />
  <br>
  <div id="initiallyHidden" style="display: none;">Content</div>

Above is the scripts all used for this.

Thanks

score 1 · Answer 1 · answered May 25 '17 at 10:37

1

In order to keep the chat window state between pages, you will need to persist the state somewhere.

For example, when the user opens the chat, you could set a cookie to store the new state. When loading each page, you would check the cookie for the current state (open / closed) and default if no cookie is available.

answered May 25 '17 at 10:37

Fenton

241,084
71
387
401

1

I thought that may be the case Fenton, thanks. I will take a look around and see if I can find anything to help me along the way – LongshotMP May 25 '17 at 10:38

score 0 · Accepted Answer · edited Dec 20 '19 at 21:51

0

It seems to me, that Cookie or Local storage is needed to be used to persist the user preferences for the current session. So when page is rendered, check the initial state and update state with every click.
The example of using cookies can be found here.
So the example will look like this (using js-cookie):

$(document).ready(function() {
  var chatVisible = 'chatVisible';
  var chatElement = $('#initiallyHidden');
  var getCookie = function() {
    return JSON.parse(Cookies.get(chatVisible) || 'false');
  };
  var setCookie = function(value) {
    Cookies.set(chatVisible, value)
  };
  var visible = getCookie();
  chatElement.toggle(visible);
  setCookie(visible);

  $('#hideshow').on('click', function() {
    var visible = !getCookie();
    setCookie(visible);
    chatElement.toggle(visible);
  });
});

#chatbox {
  position: fixed;
  bottom: 0;
  right: 0;
  float: right;
}

#initiallyHidden {
  bottom: 100px;
  right: 0;
  float: right;
  width: 300px;
  height: 200px;
  border-style: solid;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
<div id="chatbox">
  <input type="button" id="hideshow" value="Quick Chat" class="tbox" />
</div>
<br>
<div id="initiallyHidden" style="display: none;">
  Content
</div>

Please note, that cookies in chrome work properly when you use web server to serve your files, not just opening the file. If you need that possibility, please refer this answer. Firefox is OK with serving cookies even for static files.

edited Dec 20 '19 at 21:51

Goran Stoyanov

2,311
1
21
31

answered May 25 '17 at 10:40

Roman Kotov

1,039
1
15
13

Thank you @Roman So would I in this case need to replace the "chatVisible" entry within the Jquery to the div that I have? (initiallyHidden) – LongshotMP May 25 '17 at 11:07
Sorry, Didn't tag properly. – LongshotMP May 25 '17 at 11:45
Cookie is a sort of key-value data storage, which is held inside the browser for every site. According to the [examples](https://www.electrictoolbox.com/jquery-cookies/) cookie can be set by `$.cookie("key", "value");` and got by `$.cookie("key");`. So in my example "chatVisible" is only a key, that refers to the settings bound to the chat. I created variable `var chatVisible = 'chatVisible';` to avoid mistypings while typing key name multiple times. Element operations are performed on `var chatElement = jQuery('#hideshow');` DOM element, so you can change this variable. – Roman Kotov May 25 '17 at 11:45
Sorry, that was my mistake, so updated the answer, and now `var chatElement = jQuery('#hideshow');` is fixed and looks like `var chatElement = jQuery('#initiallyHidden');`. – Roman Kotov May 25 '17 at 11:49
I have entered the code but unfortunately it no longer opens or closes the div – LongshotMP May 25 '17 at 12:10
Updated the example and tested it locally. Also added tags for script and style section. – Roman Kotov May 25 '17 at 13:29

JQuery show/hide div toggle stay open after refresh

2 Answers2