Demo available here: http://web.cs.dal.ca/~selig/finale/
They're evidently collapsing very weird. Could anyone help me figure out how to make them disable correctly?
jQuery:
$(document).ready(function() {
$('#toggle1').click(function() {
$('#collapse1').toggle('fast');
$('#toggle1').attr('src', 'media/expand.png');
});
$('#toggle2').click(function() {
$('#collapse2').toggle('fast');
$('#toggle2').attr('src', 'media/expand.png');
});
});
Relevant HTML:
This HTML is for the div section of the page as well as the identified menu portions.
<div id="menu">
<ul>
<li class="title">Sites <img src="media/collapse.png" alt="Toggle expansion button" id="toggle1" /></li>
</ul>
<ul id="collapse1">
<li><a href="">Assignment 1</a></li>
<li><a href="">Assignment 2</a></li>
<li><a href="">Assignment 3</a></li>
<li><a href="">Assignment 4</a></li>
<li><a href="">Assignment 5</a></li>
<li><a href="">Assignment 6</a></li>
<li><a href="">Assignment 7</a></li>
</ul>
<ul>
<li class="title">Articles <img src="media/collapse.png" alt="Toggle expansion button" id="toggle2" /></li>
</ul>
<ul id="collapse2">
<li><a href="http://en.wikipedia.org/wiki/Christmas">Christmas</a></li>
<li><a href="http://en.wikipedia.org/wiki/Gift">Gifts</a></li>
<li><a href="http://en.wikipedia.org/wiki/Happiness">Happiness</a></li>
<li><a href="http://en.wikipedia.org/wiki/Santa_Claus">Santa Claus</a></li>
<li><a href="http://en.wikipedia.org/wiki/Rudolph_the_Red-Nosed_Reindeer">Rudolph</a></li>
<li><a href="http://en.wikipedia.org/wiki/Reindeer">Reindeer</a></li>
<li><a href="http://en.wikipedia.org/wiki/December">December</a></li>
<li><a href="http://en.wikipedia.org/wiki/Snow">Snow</a></li>
<li><a href="http://en.wikipedia.org/wiki/Elf">Elves</a></li>
<li><a href="http://en.wikipedia.org/wiki/Christmas_carol">Caroling</a></li>
<li><a href="http://en.wikipedia.org/wiki/Christmas_card">Cards</a></li>
<li><a href="http://en.wikipedia.org/wiki/Eggnog">Eggnog</a></li>
<li><a href="http://en.wikipedia.org/wiki/Cookie">Cookies</a></li>
<li><a href="http://en.wikipedia.org/wiki/Chimney">Chimney</a></li>
<li><a href="http://en.wikipedia.org/wiki/Christmas_tree">Trees</a></li>
<li><a href="http://en.wikipedia.org/wiki/Christmas_lights_(decoration)">Lights</a></li>
<li><a href="http://en.wikipedia.org/wiki/Santa's_workshop">Workshop</a></li>
<li><a href="http://en.wikipedia.org/wiki/Gingerbread">Gingerbread</a></li>
<li><a href="http://en.wikipedia.org/wiki/Cheering">Cheer</a></li>
<li><a href="http://en.wikipedia.org/wiki/Tinsel"><strong>Tinsel</strong></a></li>
<li><a href="http://en.wikipedia.org/wiki/Christmas_stocking">Stockings</a></li>
<li><a href="http://en.wikipedia.org/wiki/Gift_wrapping">Wrapping</a></li>
<li><a href="http://en.wikipedia.org/wiki/The_Nutcracker">Nutcracker</a></li>
<li><a href="http://en.wikipedia.org/wiki/World_of_Coca-Cola">Polar Bears</a></li>
<li><a href="http://en.wikipedia.org/wiki/Tatamagouche,_Nova_Scotia">T'was the night before Christmas</a></li>
<li><a href="http://en.wikipedia.org/wiki/Talladega_Nights:_The_Ballad_of_Ricky_Bobby">Baby Jesus</a></li>
</ul>
</div>
Relevant CSS:
(CSS for the relevant HTML part)
#menu {
float: left;
width: 107px;
background: tan;
color: black;
margin: 0 5px 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid grey;
border-radius: 3px;
}
#menu ul {
display: inline;
list-style: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
}
#menu li {
border-bottom: 1px solid black;
padding: 5px 5px 5px 5px;
}
#menu a {
color: black;
}
li.first {
border-left: 1px solid black;
}
li.title {
background: #593f26;
color: white;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
The problem is to do with the fact that the uls are set to display: inline, when the jQuery .toggle() method sets them to display: inline-block when it is showing them.
So I suggest you tweak your CSS to have the uls look right as block level elements, and then jQuery's functions should work.