How to make cross-site collapsible panels with saved user choice

Greenshift 3.7 version has an exciting function for using cookies with Button block.

This is simple on first look but very powerful and flexible option. You can find it in Button option

Let’s see one practical example how we can use it. For example, creating collapsible panels.

Imagine, that you have block with many elements. But you want to give users a choice to collapse (hide some elements). Yes, you can use toggle block or content toggle, but they require to have special structure of your content and they don’t save user choice.

Here, you can add button and add special name and class for cookie. Now, when user clicks on this button, then, cookie will be saved and some class will be added to Body of page.

Then, you can use this body class to hide/show/style elements on page.

Check this example. Here we have full panel, now, click on right button. It adds special class and cookie with name floatingclosepanel

This block will be disabled when you click on the collapse
70% off on 2 year plans + 2 months free

Now, I can use this class to hide some elements.

For example, in advanced tab – Responsive and Custom CSS of text block, I added next code

.floatingclosepanel {GREENSHIFT}{display:none}

if you need something opposite and you want to hide element until class is added, use next example

body:not(.floatingclosepanel) {GREENSHIFT}{display:none}

It means that once body will have class floatingclosepanel (which will be added once cookie is saved) we hide current block (because placeholder {GREENSHIFT} will be replaced by class of block where you added custom CSS.

You can also enable the option to make toggle cookie saving (secondary click will revert everything back) or you can leave only one click and hide collapse button by adding the same class floatingclosepanel to Disable class option (if body has such class, then, it will hide button).

One big benefit from this option is that it’s cross site saving. It means that when user clicks on such button, his choice is saved and panel will be collapsed on page reload.

Just click to collapse panel on this page. Then reload it.

«
«

Leave a Reply

Your email address will not be published.