How can I use nested collapsible menu? - html

Question

I'd like to use collapsible menu inside the sections. But it's not working, when i Add class=”collapsed” to SECTION B-B, it displays expanded without clicking. I want section 2.2 or section B-B like Drop down. What should i add or change to do that? Your help is very much appreciated.
Here's my work what i tried
JavaScript:
$(document).ready(function () {
setTimeout(function () {
// Slide
$('#menu1 > li > a.expanded + ul').slideToggle('medium');
$('#menu1 > li > a').click(function () {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});
$('#example1 .expand_all').click(function () {
$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
});
$('#example1 .collapse_all').click(function () {
$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
});
}, 250);
});
HTML
<div id="example1">
<ul id="menu1" class="example_menu">
<li><a class="collapsed" href="#">SECTION A</a>
<ul>
<li>SECTION A-A</li>
<li>SECTION A-B</li>
<li>SECTION A-C</li>
</ul>
</li>
<li><a class="collapsed" href="#">SECTION B</a>
<ul>
<li>SECTION B-A</li>
<ul>
<li><a class="collapsed" href="#">SECTION B-B</a></li>
<li>SECTION B-B-1</li>
<li>SECTION B-B-2</li>
<li>SECTION B-B-3</li>
<li>SECTION B-B-4</li>
</ul>
</ul>
</li>
<li><a class="collapsed" href="#">SECTION C</a>
<ul>
<li>SECTION C-A</li>
<li>SECTION C-B</li>
<li>SECTION C-C</li>
</ul>
</li>
</ul>
</div>
CSS
body {
font: 10pt Arial, Helvetica, Sans-serif;
background-image: url();
margin: 0px;
}
a {
text-decoration: none;
}
#example1,
#example2,
#example3,
#example4,
#example5 {
float: left;
}
.expand_all,
.collapse_all {
cursor: pointer;
}
.example_menu {
font-size: 95%;
list-style: none;
margin: 0;
padding: 0;
vertical-align: top;
width: 230px;
}
.example_menu ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
#menu1,
#menu2,
#menu3,
#menu4,
#menu5 {
margin: 0;
color: #96C;
}
#menu1 li,
#menu2 li,
#menu3 li,
#menu4 li,
#menu5 li,
.example_menu li {
background-image: none;
margin: 0;
padding: 0;
}
.example_menu ul ul {
display: block;
}
.example_menu ul ul li a {
padding-left: 20px;
width: 202px;
}
.example_menu li.header3 a {
padding-left: 34px;
width: 188px;
}
.example_menu a {
color: #000;
cursor: pointer;
display: block;
font-weight: bold;
margin-left: 0;
width: 211px;
padding-top: 18px;
padding-right: 0px;
padding-bottom: 12px;
padding-left: 19px;
}
.example_menu a.expanded {
background: #bbb url('images/collapse.gif') no-repeat 3px 61%;
}
.example_menu a.collapsed {
border-top: 1px solid #E3E3E3;
background-color: #bbb;
background-image: url(images/expand.gif);
background-repeat: no-repeat;
background-position: 3px 61%;
}
.example_menu a.normal {
background: none repeat scroll 0 0 #BBBBBB;
}
.example_menu a:hover {
text-decoration: none;
}
.example_menu ul a {
background: #e8e8e8;
border-top: 2px solid #fff;
color: #000;
display: block;
font-weight: normal;
padding: 3px 8px 2px 17px;
width: 205px;
}
.example_menu ul a:link {
font-weight: bolder;
}
.example_menu ul a:hover {
background : #f5f5f5;
text-decoration: underline;
}
.example_menu li.active a {
background: #fff;
}
.example_menu li.active li a {
background: #e8e8e8;
}
#menu1 li.footer,
#menu2 li.footer,
#menu3 li.footer,
#menu4 li.footer,
#menu5 li.footer,
.example_menu .footer {
background: transparent url('images/footer.jpg') no-repeat 0 0;
border-top: 2px solid #fff;
height: 9px;
line-height: 15px;
margin: 0 0 10px 0;
width: 131px;
}
.example_menu .footer span {
display: none;
}

Answer 1

Fixing your html itself seems to solve half of the issue.
You need to add the following in css
a.collapsed + ul{
display:none;
}
note: i took the click event handler outside the setTimeout which seem to be unnecessary (no need of slideToggle('medium') and timeOut to compensate it since <ul> s are hidden using css)
check this Fiddle

Answer 2

I didn't dive fully into your code. But this would be a start:
Change HTML structure of the second level to match the first level drop down:
<li><a class="collapsed" href="#">SECTION B</a>
<ul>
<li>SECTION B-A
</li>
<li><a class="collapsed" href="#">SECTION B-B</a>
<ul>
<li>SECTION B-B-1
</li>
<li>SECTION B-B-2
</li>
<li>SECTION B-B-3
</li>
<li>SECTION B-B-4
</li>
</ul>
</li>
</ul>
</li>
And "generalise" your click handler:
[...]
$('#menu1 li > a.expanded + ul').slideToggle('medium');
$('#menu1 li > a').click(function () {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});
[...]
Not sure about your "all" handlers. Without source you have to figure it out yourself :)