SOLVED: 'Accordion' style menu problems
Hello all, first time poster here!
I've just started teaching myself some new web dev. tricks, and having seen JQuery referenced just about everywhere, I thought I'd have a look and see what it can do. Thus far I'm very impressed!
I've built a little sandbox page to test some stuff out, and am trying to create a basic accordion style menu. It all seemed to be working fine, but then I noticed a couple of strange glitches. Any help/pointers would be greatly appreciated.
Glitch 1:
I have three headers on the menu. Clicking down them expands and collapses them as expected. However, after expanding the third menu out, if I then click on either the first or second header, nothing will happen. If I then click again, they expand as usual.
Glitch 2:
This only seems to happen in Firefox, IE doesn't encounter this problem; Following the above (glitch 1), the expanded div from menu one now overlays the header of menu item two. I assume this is due to the fact the divs are of varying sizes, the first one being the largest.
HTML:
-
<div class="head">la</div>
<div class="cont">
<span class="nav">one</span>
<span class="nav">two</span>
<span class="nav">test</span>
</div>
<div class="head">lala</div>
<div class="cont">
<span class="nav">test2</span>
</div>
<div class="head">three</div>
<div class="cont">
<span class="nav">arf</span>
<span class="nav">mrarf</span>
</div>
JQuery
-
var h;
var cssHeight;
var target;
$("div.cont").each(function(){
$(this).css("height", $(this).height()+"px");
$(this).hide();
});
$(".head").toggle(function() {
target = $(this).next(".cont");
target.animate({height: 'show', opacity:'show' }, 'slow');
target.siblings("div.cont").each(function() {
h = $(this).height();
cssHeight = $(this).css('height');
$(this).animate({height: '1px', opacity:'hide'}, 'slow', function() {
$(this).hide();
$(this).height(h);
$(this).css('height',cssHeight);
});
});
},function(){
target = $(this).next(".cont");
h = target.height();
cssHeight = target.css('height');
target.animate({height: '1px', opacity:'hide' }, 'slow', function() {
target.hide();
target.height(h);
target.css('height',cssHeight);
});
});
Regards