I am wondering if it is possible to ensure that when the page is loaded, the block was already closed if it was hidden before.

That is, I have a block:

<div class="sliderBlock"> <div>....some info....</div> </div><!-- .sliderBlock -->

In this block there is a button that can collapse and expand it to a certain size. Namely, an open block : 350 px , a collapsed block: 50 px ;

Suppose I opened the main page and hid this block. How can I make it so that when switching to other pages, this slider is still minimized without any actions visible to the user?

I tried to do the following:

 $(document).ready(function(){ var storage = $.localStorage; if (storage.get('_slider') == 'hide') { sliderBlock.css({'height': '50px'}); hideSlider.css({'transform': 'rotate(-45deg)'}) } });

Used local storage for verification. The _slider value can be empty or take the show value, it means that the block is open, or accept the value of hide - the block is closed.

When it all worked without visible action. But now for some reason it loads the page, and the block of full size is rolled up to 50 px.

Can someone advise how to solve this problem?

    1 answer 1

    Most likely the problem is that initially (before loading the scripts) you have the expanded state of the block (in styles).

    Later, when your page loads, i.e. The handler on $ (document) .ready is called. The block is checked and hidden.

    Possible solutions:

    1. Change the initial state of your block, let it always be minimized before loading, and after loading it will be shown or not.
    2. Don't wait for jquery and other scripts to load (write a couple of javascript lines without jquery)
    3. Use localStorage instead of cookie. Then it will be possible on the server (before rendering the page) to set the desired state to the block.