jQuery - Click element effects next element of type?

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 - Click element effects next element of type?

Post by JAB Creations »

There was a thread that I've been searching for that someone shared how to collapse a div following a a header without using IDs or classes but programming jQuery to simply seek the first element after the trigger element of a type.

So for example I want to have all h2 elements collapse the first following div with the following HTML code...

Code: Select all

<h2>header</h2>
<div>some content here</div>
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Untested (and I haven't touched JS in weeks)...

Code: Select all

 $("h2").click(function () { 
      $(this).next('div').hide(); 
    });
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

That helps me tremendously!

The only problem I'm having right now is that the script toggles the div to collapse and then automatically expands the div element? The desired behavior would have the div not expand until the second click.

Code: Select all

$("h2").click(function () {
 $(this).next('div').BlindToggleVertically(1000,null, 'bounceout');
});
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

That problem has been solved, just had to remove old functions. :wink:

Is there a way to limit this trigger to only occur within a parent element (via ID such as #content)?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Just modify the 'CSS' selector used to trigger the event...

$('h2') -> $('#content h2')
User avatar
arpowers
Forum Commoner
Posts: 76
Joined: Sun Oct 14, 2007 10:05 pm
Location: san diego, ca

Post by arpowers »

have you tried .slideToggle() ?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

arpowers wrote:have you tried .slideToggle() ?
He's currently using BlindToggle(), different effect, same process...


<edit>heh.. blingtoggle ;)</edit>
Last edited by nickvd on Sat Oct 27, 2007 12:54 pm, edited 1 time in total.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

I tried slideToggle though it has a sort of pop effect at the beginning or ending of the animation. Not sure what (besides the pop) is supposed to be different between the two effects?

One more question, what rules can I use to restrict animation in specific instances? Thanks for your help!
Post Reply