Question

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;
    }); 


})

Answer 1

What about fadeToggle?