jQuery+Interface: *smooth* toggle for already hidden layer?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

jQuery+Interface: *smooth* toggle for already hidden layer?

Post 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?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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. :wink:

I want my XHTML code to look like this...

Code: Select all

<h3 class="hidethedivbelow">Title Here</h3>
<div class="hiddenbydefault">...</div>
Suggestions?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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!
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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! :D
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I live to serve ;-)
Post Reply