刷新页面后的Javascript变量

Question

I try to create my own collapsed sidebar, and I want to have the cookie saved for settings(collapsed or expanded bar). Here`s my code from to footer included file:

var cookieRightSideBar;
var $postscontainer;
var $container;
var $infocontainer;
cookieRightSideBar = document.cookie.replace(/(?:(?:^|.*;\s*)rightside_container\s*\=\s*([^;]*).*$)|^.*$/, "$1");
$postscontainer = document.getElementById('leftside');
$container = document.getElementById('rightside_container');
$infocontainer = document.getElementById('rightside');

function collapseRightside() {
    document.cookie = (cookieRightSideBar == 'collapsed') ? 'rightside_container=expanded' : 'rightside_container=collapsed';
    $postscontainer.style.width = ($postscontainer.style.width == '99%') ? '80%' : '99%';
    $container.style.display = ($container.style.display == 'none') ? 'block' : 'none';
    $infocontainer.style.width = ($infocontainer.style.width == '0%') ? '19%' : '0%';
}


if (document.getElementById('leftside')) {
    var $myheight = document.getElementById ('leftside').offsetHeight - 62;
    document.getElementById('rightside').style.maxHeight = $myheight + 'px';
}

if (cookieRightSideBar == 'expanded') {
    $container.style.display = 'block';
    $infocontainer.style.width =  "19%";
    $postscontainer.style.width = "80%";
}

Its almost worked, except couple sadly things. Then after refresh a page, I click to button for expand my bar, looks like function collapseRightside not worked correctly after first click(bar collapsed if was expanded but not expanded if was collapsed ). This function properly work with any stages only after second click. And one more... If I collaps bar, and expand again and then refresh page, the bar appear collapsed. I understarnd what I have mistakes in logical things, but I can`t understand where? Thanks for any help!!!

Answer 1

This seems to fix your problem.

https://jsfiddle.net/L5unwnL9/5/

The problem was that you were checking for $container.style.display == 'none' while that value is null on page load. This fixed it on both container and infocontainer. I've also added createCookie and getCookie functions just because it was easier to use for me.

var cookieRightSideBar;
var $postscontainer;
var $container;
var $infocontainer;
var e = document.getElementById('onclick');
e.onclick = collapseRightside;
cookieRightSideBar = getCookie("rightside_container")
$container = document.getElementById('rightside_container');
$infocontainer = document.getElementById('rightside');

function collapseRightside() {
    cookieRightSideBar = (getCookie('rightside_container') == 'collapsed') ? 'expanded' : 'collapsed';

    createCookie("rightside_container", cookieRightSideBar);


    $container.style.display = (!$container.style.display || $container.style.display == 'none') ? 'block' : 'none';

    $infocontainer.style.width = (!$infocontainer.style.width || $infocontainer.style.width == '0%') ? '19%' : '0%';
}


if (document.getElementById('leftside')) {
    var $myheight = document.getElementById('leftside').offsetHeight - 62;
    document.getElementById('rightside').style.maxHeight = $myheight + 'px';
}


if (cookieRightSideBar === 'expanded') {
    $container.style.display = 'block';
    $infocontainer.style.width = "19%";
}


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 getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}