jQuery+Interface: *smooth* toggle for already hidden layer?
Moderator: General Moderators
- 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?
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?
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
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...
Suggestions?
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>- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
The next() method will select the next sibling element for you.
That way you can ditch all those extra classes, unless you really need them!
Code: Select all
$(function(){
$('h3').click(function(){
$(this).next('div').slideToggle(); // this is the onclick function
}).next('div').hide(); // hide the element initially
});- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact: