Skip to content Skip to sidebar Skip to footer

Having Trouble Implementing Cookie Save State To JQuery Toggle

I've been coming up with a JQuery toggle with the help of Nicolas R that saves the state of the toggle using a cookie but am currently having trouble implementing it as it pulls in

Solution 1:

Cozmoz,

I updated the referenced cookie script in your JS Fiddle (see external resources): it seems to work now. When I first tried the cookie was causing a bug. The text is changing independtly, can you check if you have a bug in the fiddle?

EDIT: new response: the text are different between the panels, in this sample I use the current text and replace the last character by a plus/minus symbol

http://jsfiddle.net/xVa7e/6/

$(document).ready(function() {
    // check the cookies when the page loads
    // 1st panel
    if ($.cookie('currentToggleslide1panel') === 'visible') {
        togglePanel($('#slide1panel'), $('#slide1'), 0);
    }
    // 2nd panel
     if ($.cookie('currentToggleslide2panel') === 'visible') {
        togglePanel($('#slide2panel'), $('#slide2'), 0);
    }    

    //handle the clicking of the show/hide toggle button of the 1st panel
    $('#slide1').click(function() {
        //toggle the panel as required
        togglePanel($('#slide1panel'), $('#slide1'), 'slow');
    });

     //handle the clicking of the show/hide toggle button of the 2nd panel
    $('#slide2').click(function() {
        //toggle the panel as required
        togglePanel($('#slide2panel'), $('#slide2'), 'slow');
    });
});

function togglePanel(panel, button, toggleSpeed) {
    var panelPreviousStateVisible = panel.is(':visible');
    // Toggle the div
    if (toggleSpeed > 0 || toggleSpeed === 'slow' || toggleSpeed === 'fast') {
        panel.slideToggle(toggleSpeed);
    } else {
        panel.toggle();
    }

    // Once toggled, set the cookie and the text
    if (!panelPreviousStateVisible) { 
        $.cookie('currentToggle' + panel.attr('id'), 'visible', { path: '/' });
        // Set the text by removing the last char and add a minus symbol
        button.text(button.text().slice(0,-1) + "-");
    } else {
         $.cookie('currentToggle' + panel.attr('id'), 'hidden', { path: '/' });
        // Set the text by removing the last char and add a plus symbol
        button.text(button.text().slice(0,-1) + "+");
    }
}

Post a Comment for "Having Trouble Implementing Cookie Save State To JQuery Toggle"