CODEWITHSUNDEEP
javascriptjqueryfade
Dean Pauley
Dean Pauley

Reputation: 35

Click to reveal and hide menu

I asked a question yesterday about a click to reveal menu which got answered perfectly. However, I was wondering how I can make the div fade in when the text "project info" is clicked and then fade out again when "project info is clicked again". I know this is probably a very basic thing but i'm extremely new to javascript and jquery and would appreciate some help greatly. The html code is as follows:

<div  class="descinner">
    <a href="javascript:void(0);" class="showDesc">Project info</a>    
</div>

and the Javascript:

$('.showDesc').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
$('body').click(function() { $('.showDesc').next().hide(); });

Upvotes: 0

Views: 317

Answers (4)

Packet Tracer
Packet Tracer

Reputation: 3924

you have jQuery animation functions: fadeIn and fadeOut. you can also use show and hide functions. just set the desired speed parameter

$('your_div').fadeIn(100);
$('your_div').fadeOut(100);

Upvotes: 0

webwrks
webwrks

Reputation: 11918

write a custom function and call it onClick...inside that function you can put your fadeIn and fadeOut...and you especially can't do it with .toggle().

Upvotes: 0

Oliver
Oliver

Reputation: 11597

Check out the FadeIn() function. Use it on the element you want to fade in.

Upvotes: 0

Tigraine
Tigraine

Reputation: 23648

Have you tried the fadeToggle() method?

Like this:

$('.showDesc').click(function() {
  $('.info').fadeToggle();
});

This will show the .info div on the first click of .showDesc, and hide it on the second (and so on)..

Upvotes: 4

Related Questions