jQuery Toggle Problem
jQuery Toggle Problem
EDIT: I fixed the problem... It was a CSS issue, not a jQuery issue. Lock please!
I'm using jQuery to toggle the display of a set of list items, and it does toggle whether they display... But when they display, their container doesn't expand to fit them, they simply go out of its bounds. How can I have their container expand so that it looks as if they were never hidden?
Here's the page that I'm having issues with:
http://www.techsplit.net/podcasts/
Here's the jQuery code:
-
$(document).ready(function() {
$('ul.old li:not(:first-child)').hide();
$('li.old-title h2 a').click(function () {
var podcastID = this.id;
$('ul#'+podcastID+' li:not(:first-child)').stop().toggle('fast');
return false;
});
});
And here's the relevant HTML:
-
<ul class="old" id="00001">
<li class="old-title"><h2><a id="00001" href="#">TechSplit Podcast 01 - June 10, 2009</a></h2></li>
<li><h3><img class="icon" src="old.png" width="48" height="48" alt="New!" />WWDC, Windows 7, Brand Loyalty, and more!</h3></li>
<li><a href="archives/00001.mp3"><img class="icon" src="mp3-file.png" width="48" height="48" alt="MP3 File" /></a><a href="archives/00001.mp3">Download the MP3 file!</a></li>
<li><a href="http://www.techsplit.net/forums/index.php?topic=38.0"><img class="icon" src="discussion.png" width="48" height="48" alt="Discussion" /></a><a href="http://www.techsplit.net/forums/index.php?topic=38.0">Join the discussion!</a></li>
</ul>
Thanks in advance for any help!