Issue with toggle when displaying lists

HTML & CSS
1

I have been testing a toggle function to show and hide lists that I want to get working. One is an ordered list and the other is an unordered list.

Below is the code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("li").click(function(){
			$(this).toggleClass("active");
			$(this).next("div").stop('true','true').slideToggle("slow");
		});
	});
	</script>
        
        <style type = "text/css">

	
		body{font-family:Arial;}
		ul{width:300px;}
		ul li:hover{background:#666}
		ul li{list-style-type:none; background-color: #666666; cursor:pointer; border:2px solid #666666; margin:2px; padding:5px 5px 5px 5px;}
                
                ol {list-style-type:numeric;font: italic 1em Arial; color: #999999;}
                
                ul div{color: yellow; cursor: auto; display: none; font-size: 13px;padding: 5px 0 5px 20px; text-decoration: none; }
		ul div a{color:#000000; font-weight:bold;}
		li div:hover{text-decoration:none !important;}
		li:after {float:right; content: "+"; padding:0 10px 10px 0; color:#ffffff; font-weight:bold;}
		li.active:after {float:right; content: "-"; padding:0 10px 10px 0; color:#ffffff; font-weight:bold;}
		{width:300px; margin:0 auto;}
                
                
</style>

</head>
<body>
    <div id="toggle">
	<ul>
		<li>First Titles</li>
		<div id = "first">
                    <ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
		</div>
		
                        
<li>Second Titles</li>
		<div id = "second">
                    <ul>
<li>one</li>
<li>two</li>
</ul>
		</div>
		
                        
</ul>
</div>

The toggle boxes are working as I want them to. All I want to do is display a normal ordered list and unordered list in the two seperate hidden divs but it seems to take the outer lists properties even when I assign new ones.

Is there an easy way in which I can display these two lists with the default properties usually associated with <ol> and <ul> rather than have the outer list’s properties.

2

One option is to change things like

ul li

to

ul > li

That means that the rule only applies to any li that is the direct child of the ul, rather than a li further down the line that is inside the ol.

3

Hi,

Your html is invalid I;m afraid as all content must be inside the “li” pair and not outside it.

e.g. This is correct:
<ul>
<li> content here
<div>more content</div>
</li>
</ul>

and this is invalid:

<li> content</li>
<div>more content </div>

I;m not sure how you wnated it to look but you would need to warp the title in an element and apply the click routine to that element intead of the list.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".trigger").click(function(){
			$(this).toggleClass("active");
			$(this).next().stop('true','true').slideToggle("slow");
		});
	});
	</script>
<style type = "text/css">
ul, ol {
	margin:0;
	padding:0;
	list-style:none
}
body { font-family:Arial, Helvetica, sans-serif }
#toggle ul { width:300px; }
#toggle ul ul { width:auto }
#toggle ul li li:hover {
	background:#999;
	color:#000;
}
#toggle ul li li {
	background-color: #666666;
	cursor:pointer;
	border:2px solid #666666;
	margin:2px;
	padding:5px 5px 5px 5px;
}
#toggle ul ol {
	list-style-type:decimal;
	font: italic 1em Arial;
	color: #999999;
	padding:0 0 0 20px
}
#toggle ul ul, #toggle ul ol {
	display:none;
	cursor: auto;
	font-size: 13px;
}
#toggle ul ul {
	color: yellow;
	padding: 5px 0 5px 20px;
}
#toggle ul div a {
	color:#000000;
	font-weight:bold;
}
#toggle li a:hover{ text-decoration:none}
.trigger:after {
	float:right;
	content: "+";
	color:#ffffff;
	font-weight:bold;
}
.trigger.active:after {
	float:right;
	content: "-";
	color:#ffffff;
	font-weight:bold;
}
#toggle span {
	display:block;
	border:2px solid #666666;
	margin:2px;
	padding:5px 10px 5px 5px;
	background:#666;
}
/*{
width:300px;
margin:0 auto;
}
*/
</style>
</head>
<body>
<div id="toggle">
		<ul>
				<li><span class="trigger">First Titles</span>
						<ol>
								<li>One</li>
								<li>Two</li>
								<li>Three</li>
								<li>Four</li>
						</ol>
				</li>
				<li><span class="trigger">Second Titles</span>
						<ul>
								<li>one</li>
								<li>two</li>
						</ul>
				</li>
		</ul>
</div>
</body>
</html>

There seemed to be no need for the inner divs anyway unless you were going for extra styling somewhere.

Just remember that when you say ul li {…} then that rule will also hit nested lists such as ul li ol li {}.

You could use the child selector (not supported in IE6) to restrict rules if you wanted e.g. #toggle > ul > li {color:red}.