Hello, I get this message from firefox when the javascript function loadContent is called: An error exists inside your "ontoggle" function: ReferenceError: loadContent is not defined Aborting execution of function.
I have an animated menu (#left) that expands and collapse (the text in #tavira) and loads with a fed in-out animation some content in a DIV (#right). Here the javascript code Code: <script type="text/javascript"> animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted if (divobj.id=="tavira" && state=="block") { $('#load').remove(); $('#right').fadeOut(300,loadContent); $('#left').append('<span id="load">LOADING...</span>'); $('#load').fadeIn(300); var toLoad = divobj.id+'.html #right_in'; function loadContent() { $('#right').load(toLoad,'',showNewContent()); } function showNewContent() { $('#right').fadeIn('normal',hideLoader()); } function hideLoader() { $('#load').fadeOut('normal'); } } } animatedcollapse.init(); </script> Here also the html code Code: <div id="left"> <div id="left_in"> <div style="width:408px;"> <a href="javascript:animatedcollapse.toggle ('tavira')"><img src="picts/tavira.jpg" alt="tavira" width="222" height="26" border="0" /></a></div> <div id="tavira" style="width:408px; height:150px; background: #fff; text-align:justify; padding-left:10px; padding-right:10px; padding- top:5px; padding-bottom:5px;"> Some text here... </div> </div> </div> <div id="right"> <div id="right_in"> <div style="padding-top:170px; padding-bottom:170px"><img src="picts/ projekte/tavira/POR-A4.jpg" width="561" height="401" /></div> <div style="padding-top:72px; padding-bottom:72px"><img src="picts/ projekte/tavira/POR-A1.jpg" width="427" height="596" /></div> </div> </div> Since it works just fine in safari I guess is a small code error, but to be honest I´m not very familiar with javascript so I hope someone can help me. Thanks