Page 1 of 1
jQuery+Interface: *smooth* toggle for already hidden layer?
Posted: Fri Sep 07, 2007 3:57 pm
by JAB Creations
I can only seem to get BlindToggleVertically to animate at all in Firefox on a layer that is initially hidden. The problem is that it keeps giving child block elements floats (which makes them use needed width versus available width) during the animation. This creates a visual distortion that negates even bothering to use the animation. Has anyone gotten this to work correctly with any of the other Interface methods?
Posted: Fri Sep 07, 2007 7:11 pm
by JAB Creations
The animation effects seem to work smoothly...
I'm now thinking that an animation toggle would work between two classes, 'hidden' and 'visible'. Is there a way to get jQuery + Interface to animate the layer to expand downloads?
Posted: Fri Sep 07, 2007 7:33 pm
by JAB Creations
It always helps to have a visual example...
http://jquery.andreaseberhard.de/toggleElements/
The first example is almost perfect (it's hidden by default)...the problem is that you're clicking a title attribute...not a header element. This breaks down the header hierarchy I've established on a new layout and I don't want to wait for HTML 5.
I want my XHTML code to look like this...
Code: Select all
<h3 class="hidethedivbelow">Title Here</h3>
<div class="hiddenbydefault">...</div>
Suggestions?
Posted: Sat Sep 08, 2007 5:20 pm
by Kieran Huggins
The next() method will select the next sibling element for you.
Code: Select all
$(function(){
$('h3').click(function(){
$(this).next('div').slideToggle(); // this is the onclick function
}).next('div').hide(); // hide the element initially
});
That way you can ditch all those extra classes, unless you really need them!
Posted: Sat Sep 08, 2007 7:51 pm
by JAB Creations
Ditching the classes is nice! Added to the wrong header...but once I figured it out it works *perfect*! Thanks for your help!

Posted: Sat Sep 08, 2007 7:58 pm
by Kieran Huggins
I live to serve
