Question

I’m using the jQuery toggle function for my navigation.
By default the Authors toggle is visible, the Archives toggle is closed.

http://jsfiddle.net/TeDFs/4/

My problem is that when the users switches to another page the toggles reset themselves.

For example, when the user closes the Authors toggle and opens the Archive toggle and then navigates to another page the default settings are loaded.

I read that it’s possible to store the settings via cookies but I’m absolutely new to jQuery and it would be great if somebody could help me out!

HTML

<div id="authors" class="widget">
<h2 class="widget-title-visible">Authors</h2>
<div class="toggle">
    <div class="submenu">
        <ul>
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
            <li>Name 3</li>
        </ul>
    </div>
</div>

<div id="archives" class="widget">
<h2 class="widget-title">Archiv</h2>
<div class="toggle hidden">
    <div class="submenu">       
        <ul>
            <li>November 2012</li>
            <li>Oktober 2012</li>
        </ul>
    </div>
</div>
</div>​

jQuery

function toggleWidgets() {
    jQuery('.widget-title').addClass('plus'); 

    jQuery('.widget-title-visible').addClass('minus'); 

    jQuery('.widget-title').click(function() {
        $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
    });

    jQuery('.widget-title-visible').click(function() {
        $(this).toggleClass('minus').toggleClass('plus').next().toggle(180);
    });
} 

jQuery(document).ready(function() {
    toggleWidgets();
} )​

CSS

.hidden{
    display:none;
}

.plus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
    padding: 0 0 0 12px;
}
.minus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
    padding: 0 0 0 12px;
}

​

Answer 1

function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}


function readCookie(name) {
    var nameEq = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEq) == 0)
            return c.substring(nameEq.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Here are functions to read/write cookies. You can keep you settings as you wish 🙂

If you want to toggle the visibility of both divs, just use the “id” of the div as the cookie name and save in the cookie “true” or “false” as it’s visible or not.

When you click the div, get it’s “id” and visibility and

var divId = $(this).attr("id");
var visible = false;
if($(this).isVisible())
    visible = true;

createCookie(divId, visible, 1);

And when you reload the page just

var visibleAuthors = readCookie("authors");
var visibleArchives = readCookie("archives")

Parse the result of the cookie when loading the page and then show the div you want too