I've browsed some similar questions - but I've been looking forever and no luck finding an implementation that's the same as what I'm looking to do.

It's VERY simple:

<a class=contacttoggle href=#>Contact</a>

<div>Lots of content between</div>

<div>Lots of content between</div>

<div>Lots of content between</div>

<div>Lots of content between</div>

<div class=contact_box>Contact info that is initially hidden and then fades in when the contact_toggle Contact link above is clicked</div>

I'm looking for this to fade in and it will be absolutely positioned on the page (no worries I can handle the CSS). I just DO NOT want a slide effect. Just fade in.

I feel like this code should work but it's not :(

$(document).ready(function(){





    /* function to show and hide main navigation conatct box */

    $(.contact_box).hide();



    $('a.contacttoggle').click(function() { 

        $(this).next(div).find(.contact_box).toggle(400);

        return false;

    }); 





})