Шынгыс,
<!DOCTYPE HTML>
<html>
<head>
<title>Раскрывающийся список на jQuery</title>
<meta charset="utf-8">
<style>
#center {
width: 260px;
margin: 0 auto;
margin-top: 25px;
}
#headline {
text-align: center;
}
.box {
width: 250px;
margin: 10px auto;
background: #fff;
border: 1px solid #d1d1d1;
padding: 4px;
font-family: Georgia, Helvetica, sans-serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 10px #ddd;
-webkit-box-shadow: 0px 0px 10px #ddd;
}
h3 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
background: -moz-linear-gradient(center top, #efefef 0%,#e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef),color-stop(1, #e0e0e0));
border: 1px solid #d1d1d1;
color: #c1c1c1;
font-size: 13px;
font-weight: normal;
text-shadow: 1px 1px 0px #fff;
margin:0;
cursor: pointer;
}
h3 span {
float: right;
cursor: pointer;
}
h3 span:hover {
text-shadow: 0px 0px 3px #a1eeff;
}
ul {
padding: 5px;
overflow: hidden;
margin:0;
}
ul li {
font-size: 13px;
list-style-type: square;
list-style-position: inside;
color: #a1a1a1;
padding: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul").hide();
$("ul li:odd").css("background-color", "#efefef");
$(".box h3").click(function(){
$(this).next().slideToggle();
var text = $("span",this).text();
$("span",this).text(text != "+" ? "+" : "-")
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="headline">
Раскрывающийся список на jQuery
</div>
<div id="center">
<div class="box">
<h3>Список №1<span class="expand">+</span></h3>
<ul>
<li>Пункт №1</li>
<li>Пункт №2</li>
<li>Пункт №3</li>
<li>Пункт №4</li>
<li>Пункт №5</li>
<li>Пункт №6</li>
<li>Пункт №7</li>
<li>Пункт №8</li>
<li>Пункт №9</li>
<li>Пункт №10</li>
</ul>
</div>
</div>
</div>
</body>
</html>
