when i click the left arrow the slider panel opens up.... after the slider panel open up the left arrow should turn back to right arrow..... providing my code below

http://jsfiddle.net/XNaYj/

$('#btnToggle').height($('#content').height()).click(function(){ $('#content').toggle(); $(this).toggleClass('btnToggleShow'); }); .btnToggleHide { background-image:url('http://intra.defie.co/images/cubes/arrow_black_l.png'); background-repeat:no-repeat; background-position:center; width:31px; height:26px; float:left; } .btnToggleShow { background-image:url('http://intra.defie.co/images/cubes/arrow_black_r.png'); background-repeat:no-repeat; background-position:center; width:31px; height:26px; float:left; } <div id="rightSlider"> <a href="#slidenav" class="trigger" data-slidenav="over-right"> <div id="btnToggle" class="btnToggleHide ">&nbsp;</div> </a> </div>