The only way I see to do so and degrade well would be to delegate hiding the hidden elements when your JavaScript loads, though before the load event is triggered all the content will show.
Michel Belleville 2009/11/4 Newbie <hjohn...@geolearning.com> > 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. >
