Implementing cookie to save state of JQuery toggle

Question

I would really appreciate some help implementing a cookie to save the state of a toggle in JQuery, I have created the toggle using he code in the fiddle below and have tried implementing the answer from BARMAR in the thread below but this changes the state of the tags just below it and closes the tags every time the page is loaded when I try to implement it.

Thread I have looked at: Preserve toggle state using jQuery

My Fiddle thus far:

<script type="text/javascript">
$(function() {
    $('#slide1').click(function() {
        $('.slide1').slideToggle('slow');
        $('.toggle1').toggle();
        return false;
    });
});
</script>

<a href="#" id="slide1">Slide Toggle 
<span class="toggle1">+</span>
<span class="toggle1" style="display:none;">-</span>
</a>
<div class="slide1" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

http://jsfiddle.net/fE6DJ/1/

Any help would be appreciated,

Thanks!

I just want the script to remember its last state of open or closed with the relevant plus or minus sign, thanks! — Cozmoz, Jun 23 '14 at 13:18

Nicolas R · Accepted Answer · 2014-06-23T15:45:12.867

1

Cozmoz,

You can use the "cookie" plugin referenced here: http://plugins.jquery.com/cookie/ To implement it in your solution, add the javascript file of the plugin in your sources and don't forget to reference it from your page using it.

Then, a few javascript:

$(document).ready(function() {
    // check the cookie when the page loads, opens it if needed (hidden by default)
    alert($.cookie('currentToggle'));
    if ($.cookie('currentToggle') === 'visible') {
        togglePanel(true);
    }

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

function togglePanel(show) {
    var panel = $('.slide1panel');
    var button = $('#slide1');
    if (show) {
        panel.slideToggle('slow');
        button.text('Slide Toggle -');
        $.cookie('currentToggle', 'visible', { path: '/' });
    } else {
        panel.slideToggle('slow');
        button.text('Slide Toggle +');
        $.cookie('currentToggle', 'hidden', { path: '/' });
    }
}

With your html simplified to:

<a href="#" id="slide1">Slide Toggle +</a>
<div class="slide1panel" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

Update of your fiddle: http://jsfiddle.net/fE6DJ/5/

It's working ;-)

edited Jun 23 '14 at 15:45

answered Jun 23 '14 at 13:37

Nicolas R

13,812
2
28
57

Thanks very much! Would it be possible to re-implement the slide animation though? – Cozmoz Jun 23 '14 at 14:48
Absolutely, sorry I forgot that you used slideToggle ! I changed the way I was opening/closing the div: this edited version uses slideToggle's jquery method instead of CSS. The jsfiddle is also edited (version 5, version 4 contains an error sorry) – Nicolas R Jun 23 '14 at 15:46
Once again, thank you so much! Is there a way to stop the pop-up? Also can the default state when the page opens not animate? Really appreciated! – Cozmoz Jun 23 '14 at 16:00
Okay removing the alert tags gets rid of the alert prompt but this still leaves the animation if expanded at start. – Cozmoz Jun 23 '14 at 17:34
Got it working as follows, thanks for all the help :-) http://jsfiddle.net/9UdQj/ – Cozmoz Jun 23 '14 at 17:47
Any advice on how to implement two sliding panels on the same page? This is where I am so far: http://jsfiddle.net/xVa7e/ – Cozmoz Jun 24 '14 at 09:56
You can keep the togglePanel method and add a parameter to specify which panel you have to toggle. Moreover if you want to save the state of each panel independently, set 2 cookies instead of one. I will bring you a new version of you fiddle in a few minutes. Your idea was correct but you have to change the names of the methods to be different for panel1 and panel2. But a generic approach is better – Nicolas R Jun 24 '14 at 13:26
Thanks very much! That's very kind of you! – Cozmoz Jun 24 '14 at 14:31
Hi Nicolas, I am having a problem with the script from line 42 onwards, even when trying to pull in the button from the id it still pulls in the same title for for all the buttons once activated. Any help would be appreciated, Coz. – Cozmoz Jun 25 '14 at 09:37
Hi Cozmoz, could you add another question (and send me the url)? Or we will be lost soon – Nicolas R Jun 25 '14 at 12:52
Okay, please find here: http://stackoverflow.com/questions/24413346/having-trouble-implementing-cookie-save-state-to-jquery-toggle – Cozmoz Jun 25 '14 at 15:55

Implementing cookie to save state of JQuery toggle

1 Answers1