Question

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.

Answer 1

You can do something like this:

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