Jeżeli html wygląda tak to wszystko jest zwinięte i działa. (dodać jquery)
<div id="wrapper" class="tree">
<ul>
<li>
<a href="#">jeden
<ul>
<li><a href="#">jeden+</a></li>
<li><a href="#">jeden+</a></li>
<li><a href="#">jeden+</a></li>
</ul>
</a>
</li>
<li>
<a href="#">jeden
<ul>
<li><a href="#">jeden+</a></li>
<li><a href="#">jeden+</a></li>
<li><a href="#">jeden+</a></li>
</ul>
</a>
</li>
<li>
<a href="#">jeden
<ul>
<li><a href="#">jeden+</a></li>
<li><a href="#">jeden+</a></li>
<li><a href="#">jeden+</a></li>
</ul>
</a>
</li>
<li>
<a href="#">jeden
<ul>
<li><a href="#">jeden+</a></li>
<li><a href="#">jeden+</a></li>
<li><a href="#">jeden+</a></li>
</ul>
</a>
</li>
</ul>
</div>
.tree ul {
list-style: none outside none;
}
.tree li a {
line-height: 25px;
}
.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.tree li.parent > a {
padding: 0 0 0 28px;
}
.tree li.parent > a:before {
background-image: url("../images/plus_minus_icons.png");
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
.tree ul li.active > a:before {
background-position: 0 center;
}
.tree ul li ul {
border-left: 1px solid #D9DADB;
display: none;
margin: 0 0 0 12px;
overflow: hidden;
padding: 0 0 0 25px;
}
.tree ul li ul li {
position: relative;
}
.tree ul li ul li:before {
border-bottom: 1px dashed #E2E2E3;
content: "";
left: -20px;
position: absolute;
top: 12px;
width: 15px;
}
#wrapper {
margin: 0 auto;
width: 300px;
}
$(function () {
$('.tree li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$('.tree li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
$('#all').click(function () {
$('.tree li').each(function () {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
});