Question

I have a button that toggles my footer. The current code starts off with the footer closed. My question is how do I make it so that the default state is opened? I’ve tried several configuration, but not sure what is correct. When I check the cookies on the browser, the default state is ‘hidden’.

// Toggle Button

$(document).ready(function() {
var button = $('.toggle');

//check the cookie when the page loads
if ($.cookie('currentToggle') ==='visible') {
    togglePanel(button, false);
}
    else {
     togglePanel(button, true);

}

//handle the clicking of the show/hide toggle button
button.click(function() {
    //toggle the panel as required, base on current state
    if (button.text() === "-") {
        togglePanel($(this), true);
    }
    else {
        togglePanel($(this), false);

    }
});

});

function togglePanel(button, show) {

var panel = $('footer');

if (show) {
    panel.slideUp('slow');
    button.text('+');
    $.cookie('currentToggle', 'hidden', { path: '/' });

}
else {
    panel.slideDown('slow');
    button.text('-');
    $.cookie('currentToggle', 'visible', { path: '/' });

}
}

Answer 1

I think you’ll just need this line to handle the case when there’s no cookie set:

if (!$.cookie('currentToggle'))
    $.cookie('currentToggle', 'visible');

put it just before //check the cookie when the page loads

Or, even easier, just reverse your logic when you’re checking:

if ($.cookie('currentToggle') === 'hidden') {
    togglePanel(button, true);
} else {
    togglePanel(button, false);
}