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


})

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


})

• javascript
• jquery
• toggle

• 1 $(".contact").hide(); should be $(".contact_box").hide(); right? what does 'not work' mean? the click does nothing? – jon_darkstar Commented Mar 17, 2011 at 1:05
• You're right - it is correct in the code I'm working on - just edited the question... whoops! But yeah, still not working. – Brian Commented Mar 17, 2011 at 1:05
• 1 what does 'not work' mean? nothing happens when you click? – jon_darkstar Commented Mar 17, 2011 at 1:07

4 Answers 4

What about fadeToggle?

Rather then toggle(), just animate() opacity with 'toggle'.

$(".contact_box").animate({opacity:'toggle'}, 400);

How about blockUI? It's one of those Plugins I really overuse.

Go to this link for more information: http://jquery.malsup./block/

Instead of

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

Try

$("div.contact_box").toggle(400);