CODEWITHSUNDEEP
javascriptjquery
tctc91
tctc91

Reputation: 1363

jQuery animate slideUp/Down content

Basic question but I couldn't find any related topics answering exactly what I need.

I want to create two links side by side and beneath those links will be hidden bits of content. The content will appear based upon which link is clicked. I'm having trouble working out how to access the content in the dom & using (this).

HTML:

            <div class="redirectWrap">
                <a id="redirectDefault" class="redirectOuter" href="#">
                    <h4>Default URL</h4>
                </a>
                <a id="redirectCustom" class="redirectOuter" href="#">
                    <h4>Custom URL</h4>
                </a>
                <div class="redirectDefaultInner redirectBox hide">
                    content
                </div>
                <div class="redirectCustomInner redirectBox hide">
                    content
                </div>                  
            </div>

so #redirectDefault should animate .redirectDefaultInner and #redirectCustom should animate .redirectCustomInner. (I'm going to have several of these which is why I want to make use of (this) instead of writing it out each time based on id's.

Upvotes: 0

Views: 266

Answers (2)

anantkpal
anantkpal

Reputation: 100

You can do something like this: 

   $('.redirectOuter').click(function(){
   $(this).parent().find('.'+$(this).attr('id')+'Inner').animate(/*your animation code */);
    });

Upvotes: 1

nicosantangelo
nicosantangelo

Reputation: 13716

You could use .closest() that method will retrieve the first and closest match to the selector you pass, so for example:

jQuery("#redirectDefault").click(function(){

     jQuery(this).closest(".redirectDefaultInner").animate(/*do stuff*/);

});

Upvotes: 1

Related Questions