Keep toggle state on divs using cookie.js after page refresh view jsFiddle

I have a simple code which allows me to toggle betwen two divs which are wraps for two sub navigations (#sub-nav-wrap is the alternative nav). They are fixed to the bottom of the browser :

$(function(){
$('.button').click(function(){
    $('#sub-nav-wrapmin').toggle();
    $('#sub-nav-wrap').toggle();
}); 

});

What I wish to do is to keep the state of each div the same as chosen by the user after page refresh and even if the clicks on a new sub-heading the menu will remain the same, rather then resorting to the default state.

The html is this:

<!--- Main Sub Wrap --->
<div id="bottom-wrap">
<!-- Mini Sub Nav -->

<div id="sub-nav-wrapmin" class="snWrap divone">
        <div id="sn-contentmin">
            <div id="sn-likemin"></div> 
            <div id="sn-coffeesml"></div>
            <div id="sn-sharemin"></div>
            <div id="sn-commentsml"></div>
            <div id="toggle-barmin">
                    <div id="sn-sidebrdrmin"></div>
                    <div class="sn-toggle button"></div>
           </div>
              <ul class="sn-comicsmin menu">
                <li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
                <li><a class="sn-archive" href="#archive.html">Archive</a></li>
                <li><a class="sn-vote" href="#vote.html">Vote</a></li>
                <li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
            </ul>
      </div>
</div>
<!-- Sub Nav -->
<div id="sub-nav-wrap" class="snWrap divtwo">
    <div id="sub-nav-container">
         <div id="sub-nav-content">

                <div id="sn-bnrlft"></div>
                <div id="sn-bnrrgt"></div>
                <div class="sn-dividelft"></div>
                <div class="sn-dividergt"></div>
                <div id="sn-likebg"></div>
                <div id="sn-coffeebtn">
                </div>
                <div id="sn-sharebtn"></div>
                <div id="sn-commentbtn"></div>    
                <div id="toggle-bar">
                    <div id="sn-sidebrdr"></div>
                    <div class="toggle button"></div>
                </div>            
        </div>
        <div id="sub-nav-brdr">
            <ul class="sub-nav-comics menu">
                <li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
                <li><a class="archive" href="#archive.html">Archive</a></li>
                <li><a class="vote" href="#vote.html">Vote</a></li>
                <li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
            </ul>
        </div>
    </div>
</div>

The CSS is this:

#sub-nav-wrap {
    display: none;  
}

This is my first time asking, and I have been wracking my brains to get this to work using other similar codes from this site, but nothing is working. Would appreciate any help...

David

I have constructed a jsFiddle to show how the navigation works without a cookie. This is my attempt using cookies. I hope it is something simple and I've just miss understood...

Answers:

Answer

You need the jQuery cookie plugin to use cookies that way in jQuery. There is no native support in jQuery for what you are trying to do.

If old browsers are'nt an issue, you could use local storage and do something like:

$(function(){
    var wrapmin = localStorage.getItem('wrapmin')||false,
        wrap = localStorage.getItem('wrap')||false;

    if (wrapmin) $('#sub-nav-wrapmin').show();
    if (wrap) $('#sub-nav-wrap').show();

    $('.button').click(function(){
        $('#sub-nav-wrapmin').toggle();
        $('#sub-nav-wrap').toggle();
        wrapmin = $('#sub-nav-wrapmin').is(':visible');
        wrap = $('#sub-nav-wrap').is(':visible');
        localStorage.setItem('wrapmin', wrapmin),
        localStorage.setItem('wrap', wrap);
    });    
});

You need to change your CSS as well, right now it won't work properly if the elements are initially shown.

FIDDLE

The cookie plugin is well documented. You set a cookie by giving it a name and a value, ie. two values, not one:

$.cookie('the_cookie', 'the_value');
Answer

One thing I noticed was that jQuery.cookie was not present in the fiddle, but I assume you have that on the actual site in any case. Here you go. I am sure there are more efficient methods but this will still work.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.