Q:

How to save state after Display: none? Prevent reset after page reload

Essentially I use display: none by default on one element and then use javascript to switch the hidden element to another one after a different heading is clicked.  Right now my implementation works perfectly.
The only problem is that when you reload the page, it goes back to the default, instead of keeping it as it was.  
What's happening in this code is I bind the header of the element that is hidden with the function hideUnhide.  When it get's clicked I hide the current element, show the previously hidden one, and then set the css for the headers to make the hidden one look like a link and the displayed one to look like a header.
$(document).ready(function() {
    var unclicked = $('.unclickedTeam');
    unclicked.bind("click", hideUnhide);
});

function hideUnhide() {
    var unclicked = $('.unclickedTeam');
    var clicked = $('.currentTeam');
    var displayedTeam = $('.displayedTeam');
    var hiddenTeam = $('.hiddenTeam');

    displayedTeam.css('display', 'none');
    hiddenTeam.css('display', 'block');

    displayedTeam.addClass('hiddenTeam');
    displayedTeam.removeClass('displayedTeam');

    hiddenTeam.addClass('displayedTeam');
    hiddenTeam.removeClass('hiddenTeam');

    unclicked.addClass('currentTeam');
    unclicked.removeClass('unclickedTeam');

    clicked.addClass('unclickedTeam');
    clicked.removeClass('currentTeam');

    unclicked.unbind();
    clicked.bind("click", hideUnhide);
}

How can I save the state like it is?  Aside from making them two separate pages that jump to each other when a header is clicked.

A:

You can use localStorage to store the previous state.
localStorage.setItem("hide", "yes"); // Set state

if(localStorage.getItem("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

LocalStorage is compatible with the most browsers. See: http://www.html5rocks.com/de/features/storage

If you want to be sure you can also use Cookies and JavaScript.
You can use this JS-functions to create/delete cookies:
function setCookie(name,value,mins) {
    var expires = "";
    if (mins) {
        var date = new Date();
        date.setTime(date.getTime()+(mins*60*1000));
        expires = "; expires="+date.toGMTString();
    }
    else expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(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;
}

And here is a sample how to do with JavaScript:
setCookie("hide", "yes", 43200); // Set state (expire in 30 days)

if(getCookie("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

Tested both, working.

