I have two divs. One acts as a chat window launcher. Chat window element is hidden by default. When I click the chat window launcher element, chat window appears and launcher hides. I've also made a small close button for the chat window that reverses the operation.
The problem is that when I reload the page, the chat window disappears and I have to relaunch again. What can I do, so that once the launcher is activated, the chat window remains visible even on page reload so that I can only close it using its close button?
HTML
<div class="chat-launcher" title="Launch Chat Window">
<span class=" glyphicon glyphicon-pencil chat-launcher-pencil " style="color: #ffffff;font-size: 20px;"></span>
</div>
<div class="chat-window ">
<span id="close">X</span>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.chat-launcher').on('click', function () {
$('.chat-window').show();
$('.chat-launcher').hide();
});
});
$(document).ready(function(){
$('#close').on('click',function(){
$('.chat-window').hide();
$('.chat-launcher').show();
});
});
</script>