jquery - Show/Hide div based on another div's state without refreshing the page -

jquery - Show/Hide div based on another div's state without refreshing the page -

i trying show/hide 'link2' based on state of div. if it's open, hide link2, if it's closed, show link2.

both link1 , link2 trigger close or open panel div. since using sessions remember state of div, want corresponding link show well.

http://jsfiddle.net/9kua5/

$('#panel').toggleclass('hidden', sessionstorage.getitem('form_visible') != 'true'); $('#flip, #flip_slip').click(function() { $('#panel').slidetoggle('slow', function() { $(this).toggleclass('hidden'); }); sessionstorage.setitem('form_visible', $('#panel').hasclass('hidden')); }); $('#flip_slip')[ $('#panel').is(':visible') ? "hide" : "fadein" ]();

html:

<div id="panel"> test <div id="flip">link1</div> </div> <div id="flip_slip">link2</div>

edit:

example, if click on link1 -> panel div fades ou -> link2 appears since session saves state of panel div, on page refresh, link2 should visible

demo fiddle pretty simplified code. jquery code

$(function () { if(sessionstorage.getitem('form_visible')===null){ sessionstorage.setitem('form_visible', 'false');//initiate first time }; checksessionstorage(); //call alter #panel display $('#flip_slip,#flip').click(function () { sessionstorage.setitem('form_visible', (sessionstorage.getitem('form_visible') == 'false' ? 'true' : 'false')); //change sessionstorage checksessionstorage(); //call alter #panel display }); function checksessionstorage() { if (sessionstorage.getitem('form_visible') == 'true') { $('#panel').slidedown(); $('#flip_slip').fadeout(); } else { $('#panel').slideup(); $('#flip_slip').fadein(); } } });

jquery