Implementing cookie to save state of JQuery toggle -

Implementing cookie to save state of JQuery toggle -

i appreciate help implementing cookie save state of toggle in jquery, have created toggle using code in fiddle below , have tried implementing reply barmar in thread below changes state of tags below , closes tags every time page loaded when seek implement it.

thread have looked at: preserve toggle state using jquery

my fiddle far:

<script type="text/javascript"> $(function() { $('#slide1').click(function() { $('.slide1').slidetoggle('slow'); $('.toggle1').toggle(); homecoming 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 appreciated,

thanks!

cozmoz,

you can utilize "cookie" plugin referenced here: http://plugins.jquery.com/cookie/ implement in solution, add together javascript file of plugin in sources , don't forget reference page using it.

then, few javascript:

$(document).ready(function() { // check cookie when page loads, opens if needed (hidden default) alert($.cookie('currenttoggle')); if ($.cookie('currenttoggle') === 'visible') { togglepanel(true); } //handle clicking of show/hide toggle button $('#slide1').click(function() { //toggle panel required, base of operations 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 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 fiddle: http://jsfiddle.net/fe6dj/5/

it's working ;-)

jquery cookies toggle