- одинаковые id это не есть хорошо.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li > ul {
display: none;
}
li.manual_open, li.manual_close{
list-style-type: none;
}
span{
cursor: pointer;
}
.manual_open::before {
content: "+ ";
margin-left: 0px;
}
.manual_close::before {
content: "- ";
margin-left: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
$('span:has(+ul)').click(function (e) {
$(this).parent().toggleClass('manual_open manual_close')
e.stopPropagation();
$('+ul', this).slideToggle();
});
})
</script>
</head>
<body>
<div id="mainManual">
<h2>Оглавление</h2>
<ul>
<li class='manual_open'><span>Введение</span>
<ul class='sub'>
<li class='file'><a href='?view=manual&id=7'>Установка</a></li>
<li class='file'><a href='?view=manual&id=8'>Программное обеспечение</a></li>
</ul>
</li>
<li class='manual_open'><span>Глава 1</span>
<ul class='sub'>
<li class='file'><a href='?view=manual&id=10'>Интерфейс программы</a></li>
</ul></li>
</ul>
</div>
</body>
</html>