Greetings. A simple script to show / hide the item is available.

$(document).ready(function(){ $('#link').click(function(){ $('#div').toggle(); return false; }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="link">Кнопка</a> <div id="div">Тут содержимое</div>

Is there a way to remember the result of clicking in the browser’s cache memory so that when switching to other pages the selected block was closed or opened?

Thank you for any help.

  • one
    cookies, localstorage - Alexey Shimansky
  • Thanks for the tip. Done. - Alexey Giryayev pm

1 answer 1

Working solution: http://codepen.io/pen/QEBORm

HTML:

 <a href="javascript:toggleBlock()">Скрыть / показать</a> <div id="div">Текст</div>

and the script itself:

 (function() { var toggle = function(element, show) { element.style.display = show ? 'block' : 'none'; }; var block = document.getElementById('div'); var visible = localStorage.hasOwnProperty('visible') ? JSON.parse(localStorage.getItem('visible')) : true; toggle(block, visible); window.toggleBlock = function() { toggle(block, visible = !visible); localStorage.setItem('visible', visible); }; })();

If suddenly someone needs a solution with adding a class to the button, there is a second solution: http://codepen.io/pen/xOJYbd

HTML:

 <a id="showhide" class="hide active" href="javascript:void(0);">список</a> <div id="showhideblock"> text </div>

and script:

 $(document).ready(function() { $('#showhide').click(function () { $('#showhideblock').slideToggle(function() { localStorage.setItem('display', $('#showhideblock').is(':hidden')); }); }); var block = localStorage.getItem('display'); if (block == 'true') { $('#showhideblock').hide(); } }); $(document).ready(function() { $('#showhide').click(function () { $('#showhide').toggleClass('active'); }); }); $(document).ready(function() { if(!$('#showhideblock').is(':hidden')) { console.log('visible'); $('#showhide').addClass('active'); } else if(!$('#banner').is(':visible')){ $('#showhide').removeClass('active'); } });