jQuery slideUp/slideDown messing up list items
Hi all.
It seems that using the slideUp/slideDown methods on <li> elements causes some odd results.
The following code hides then unhides the items with a class of "hide-show" once the document is ready. These list items lose their bullet point type markers before the text making the whole list look a bit weird.
-
<html>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
// These used to track which site/app is selected
var selectedApp="";
var selectedSite="";
$(document).ready(function() {
$(".hide-show").slideUp(600, function(){$(this).slideDown(600);});
});
</script>
<body>
<ul class="list">
<li class="listitem">Item 1</li>
<ul class="sublist">
<li class="sublistitem hide-show">Sub Item 1</li>
<li class="sublistitem">Sub Item 2</li>
<li class="sublistitem hide-show">Sub Item 3</li>
<li class="sublistitem hide-show">Sub Item 4</li>
<li class="sublistitem">Sub Item 5</li>
<li class="sublistitem">Sub Item 6</li>
</ul>
</li>
</ul>
</body>
</html>
It seems to be setting style="display: block;" for these elements, for reasons I can't work out!
Any pointers as to why this is happening and a fix would be much appreciated.
Regards,
Shiv