I am working on an accordian side navigation jquery piece and I am unable to get it to operate exactly how I want.
The menu was originally designed by Roshan Bhattarai and can be viewed at http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html The original design does not degrade well since the div containing the drop down menu information is set to display:none using CSS- but another forum poster suggested that the css selector be removed and the hiding function be set in the jquery. This is the code that was added to perform this function: $("div.menu_body").hide(); The code works to some extent, however the div does appear on the page for a split second on refresh or on page load and then diseappears. I am thinking I either did something wrong, am missing something, or could put that bit of code somewhere else in the script for the div to truly be hidden until the visible header is clicked. The whole point of adding this code is so the accordian menu degrades gracefully- if there is another way for the entire menu to be viewable with javascript turned off, please detail the steps. I have downloaded the newest version of jquery. Here is the entire script for the menu. <script type="text/javascript" language="javascript" src="/javascript/ jquery.js"></script> <script type="text/javascript"> <!--//---------------------------------+ // Developed by Roshan Bhattarai // Visit http://roshanbh.com.np for this script and more. // This notice MUST stay intact for legal use // ---------------------------------> $(document).ready(function() {$("div.menu_body").hide(); //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url(down.png)"}).next ("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp ("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); //slides the element with class "menu_body" when mouse is over the paragraph $("#secondpane p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(down.png)"}).next ("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp ("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); }); </script> The site is on a private server behind a firewall so I cannot share the site but I can provide as much information as possible to solve this issue. An example of that preload or "flashing" upon refresh of the page with this type of code is viewable on this website: http://docs.jquery.com/Effects/hide - If you view the demo where it stated "Click to hide me too" and continue to watch that line will refreshing the page, you will see the hidden information for a split second and then it will hide. I am wondering and trying to find a way to prevent that flash of hidden information to be viewable at all.
