Yesterday everything worked fine, but today for some reason it does not work, without a clue why and what contributed to this. The problem is this. I have a block slider. It is hidden by pressing a button, and the value _slider=hide added to local storage ; if it is open, the value _slider=show either absent. I need to make it so that if it was previously hidden, then when the page was loaded, it all remained hidden. Now the problem is this: the page is loading, it is open, after full loading it closes (moves up). Yesterday everything worked that way, but today it stopped.

HTML

 <div class="sliderBlock"> <p id="hideSlider"></p> <h2><input type="text" name="sliderH2" value=" текст "></h2> <h3><input type="text" name="sliderH3" value=" текст "></h3> <p><input type="text" name="sliderP1" value=" текст "></p> <p><input type="text" name="sliderP2" value=" текст "></p> </div><!-- .sliderBlock -->

jQuery The function that is responsible for this:

 $(document).ready(function () { var sliderBlock = $('.sliderBlock'); var hideSlider = $('#hideSlider'); var storage = $.localStorage; if (storage.get('_slider') == 'hide') { sliderBlock.css({'height': '50px'}); hideSlider.css({'transform': 'rotate(-45deg)'}) } hideSlider.click(function () { if (storage.get('_slider') == 'show' || !storage.get('_slider')) { storage.set('_slider', 'hide'); sliderBlock.css({'height': '50px'}); hideSlider.css({'transform': 'rotate(-45deg)'}) } else { storage.set('_slider', 'show'); hideSlider.css({'transform': 'rotate(0)'}); sliderBlock.css({'height': '350px'}) } }); }); // Slider SHOW / HIDE functions

CSS and its styles, if necessary:

 .sliderBlock { width: 100%; height: 350px; background-color: rgba(255, 255, 255, 0.2); position: relative; transition: 0.3s; overflow: hidden; #hideSlider { position: absolute; top: 10px; right: 10px; background-color: #191717; background-image: url("../image/squareClose.png"); background-repeat: no-repeat; background-position: center center; width: 30px; height: 30px; display: block; cursor: pointer; transition: .3s; z-index: 999; border-radius: 5px; &:hover { background-color: #2F2B2B; transition: 0.2s; cursor: pointer; transform: rotate(-45deg); } } h2 { position: absolute; top: 70px; left: 10%; cursor: default; width: 895px; > input { font-size: 40px; color: #2F2B2B; text-shadow: 0 0 5px; font-weight: 400; background-color: transparent; width: 100%; border: none; display: block; padding: 0px 0 0 15px; border-radius: 5px; transition: .3s; } } h3 { position: absolute; width: 805px; top: 130px; left: 19%; cursor: default; > input { font-size: 40px; color: #2F2B2B; text-shadow: 0 0 5px; font-weight: 400; background-color: transparent; width: 100%; border: none; display: block; padding: 0px 0px 0 15px; border-radius: 5px; transition: .3s; } span { font-weight: 800; } } p.sliderPar { width: 765px; position: absolute; top: 190px; left: 23%; cursor: default; > input { font-size: 25px; color: #2F2B2B; text-shadow: 0 0 5px; font-weight: 400; background-color: transparent; width: 100%; border: none; display: block; padding: 0px 0px 0 15px; border-radius: 5px; transition: .3s; } } p.sliderPar2 { position: absolute; top: 229px; left: 15%; cursor: default; width: 845px; > input { font-size: 25px; color: #2F2B2B; text-shadow: 0 0 5px; font-weight: 400; background-color: transparent; width: 100%; border: none; display: block; padding: 0px 0px 0 15px; border-radius: 5px; transition: .3s; } } p.saveBtn { position: absolute; top: 290px; width: 140px; height: 38px; left: 5%; color: #2F2B2B; overflow: hidden; border-radius: 5px; box-shadow: 0 0 5px #191919; > input { display: block; height: 38px; border: none; width: 100%; background-color: #232927; color: #ADADAD; padding: 10px 15px; cursor: pointer; transition: .3s; &:hover, &:active { transition: .3s; background-color: #1B5D42; } } } }

    0