<ul> <li> with jquery question

[qwikad.com]

The subcategories tend to show for a split second on load or refresh. Is there a way to keep it shut and show them only when you click on the CATEGORY link?


<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#category ul').hide();
$('#category li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
});
</script>

<style type="text/css">
#category, #category ul {margin: 0px; padding: 0px; text-align: left; list-style: none;}
#category li {cursor: pointer; }
</style>


<ul id="category">

<li><a onclick="javascript:void(0);">CATEGORY</a><ul>

<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>
<li><a href="/">Subcategory</a></li>

</ul></li>
</ul>

[Deadweight]

Are you wanting something like this?
http://jsfiddle.net/tfsevnzx/1/

[jscheuer1]

Without looking at your code or Deadweight's, the simple answer is yes. Use CSS. Display none is tempting and can work. In most cases you will have even better results with with visibility hidden combined with position absolute. In the stylesheet. set the elements that you don't want to have flicker on load to visibility hidden and position absolute. Then in the script, the first time you want to see them, have javascript set them to visibility visible, and - well often position absolute can remain, if not, change that to whatever you need. These initial hidden states can be achieved with a class name. If you do it that way, just have your script remove that class name once you want to see the element.

[molendijk]

<script type="text/javascript">
$(document).ready(function() {
$("#category ul").css({opacity: 0});
$('#category ul').hide();
$('#category li a').click(
function() {
$(this).next().slideToggle('normal');
setTimeout("$('#category ul').css({opacity: 1})",200);
}
);
});
</script>