Maintaining the same css of for multiple pages "mini bar" if its being shown

Question

I have a few html pages all designed the same. There is a side menu bar and when a button is pressed it closes and makes it a "mini-bar" if the button is pressed again its normal size. It works perfectly the only problem is when you move to the next page it automatically goes back to the "full version" is there a way to have the same state stick between pages so that if you have the mini-bar on the first page when you go to the next page the mini-bar is still there and not resetting?

<body class="pace-done mini-navbar">

<body class="pace-done">

score 2 · Accepted Answer · edited May 23 '17 at 11:52

Id say one possible solution is to add its state of open/closed to a cookies variable, this way, when a new page is opened/closed, the value gets saved.

First get this: https://github.com/carhartl/jquery-cookie and include in your files, then, for example on how to use, go here: How do I set/unset cookie with jQuery?

Then once you understand all that, then to give you a quick n dirty example, you

(Pseudo code)(jQuery)

$(document).ready(function(){

   //set cookie here
   $.cookie("IsBoxOpen", "yes"); //meaning yes its open on default

   $('#buttonToCLickHere').on("click", function(){
        if(box is open){
           //then close it with css/js etc but then save its state
           //code to close it visually here, then
           $.cookie("IsBoxOpen", "no"); //meaning now itll be closed
        } else {
             //do the opposite here, and then also save its status with the cookie.
          }
    });

});

Like this, everytime someone opens/closes the box (or clicks the button) its state gets saved in cookies and the user wont know the diff going from page to page.

OH and PS, this code has to go in a footer.php or header.php file (or html) so that the check happens on every page.

Hope this helps and steers you in the right direction

Maintaining the same css of for multiple pages "mini bar" if its being shown

1 Answers1