Show or cover the element with the browser cash-pamime



  • Hello. There is a simple crypt to show/cover the element.

    $(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 any way to remember the result of the strike in the browser's cabin, so that the chosen block is closed or open when it comes to other pages?

    Thank you for any help.



  • Action: http://codepen.io/pen/QEBORm

    HTML:

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

    And the violin 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 anyone needs a solution to add a class to the button, there's 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 violin:

    $(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');
        }
    });
    

Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2