How to make two functions react on a click

Question

I am new to JS.

Right now I managed to make a text appear and a div slide to the right when I click on a div.

The problem is: How can I manage to do this in reverse? (with the same animation)

I tried the if/else statement but I cant get it done. Hope some of you can help me.

Here is my Javascript code

$(document).ready(function(){
        $('#profile').click(function() {
            $('#profile-info').fadeIn("").addClass('animated fadeInDown');
            $('#profile').animate({left:'200px'}, 800,'swing');
        });
    });

Here is my HTML code

<section>
<div id="profile">
    </div>
        <div id="profile-photo">
        </div>
            <div id="profile-info">
                <p>Hello, I'm</p> 
                    <p>Rick James</p>
            </div>
</section>

Yes, either make a jsFiddle or atleast provide the markup of the animated and fadeInDown CSS classes? — Satwik Nadkarny
– Satwik Nadkarny, Commented Apr 17, 2014 at 16:40
By "in reverse" do you mean by clicking on the same button? Or do you mean after a certain period of time in the .animate call? — TimSPQR
– TimSPQR, Commented Apr 17, 2014 at 16:40

JCBiggar · Accepted Answer · 2014-04-17 18:09:48Z

1

Try this:

I'm using

if ( $( "#profile-info" ).is( ":hidden" ) ) { 
   //do this
} else {
   //do this
}

So basically if it is hidden it will do the code, the if not, the other desired code

$(document).ready(function(){
        $('#profile').click(function() {
           if ( $( "#profile-info" ).is( ":hidden" ) ) {
            $('#profile-info').fadeIn("").addClass('animated fadeInDown');
            $('#profile').animate({left:'200px'}, 800,'swing');
           } else {
            $('#profile-info').fadeOut("").removeClass('animated fadeInDown');
            $('#profile').animate({left:'200px'}, 800,'swing');
           }
        });
    });

DEMO HERE: http://jsfiddle.net/YEwUZ/509/

UPDATED:

JQUERY

$(document).ready(function(){
        $('#profile').click(function() {
           if ( $( "#profile-info" ).is( ":hidden" ) ) {
            $('#profile-info').fadeIn("").addClass('animated fadeInDown');
            $('#profile-info').animate({left:'0px',opacity:1}, 800,'swing');

           } else {
            $('#profile-info').animate({left:'200px',opacity:0}, 800,'swing');
            $('#profile-info').fadeOut("").removeClass('animated fadeInDown');

         }
      });
 });

HTML

<section>
        <div id="profile">
            test
        </div>

        <div id="profile-photo">
        </div>

        <div id="profile-info">
            <p>Hello, I'm</p> 
            <p>Rick James</p>
        </div>
</section>

CSS

#profile-info {
    display: none;
    position:relative;
    left:200px;
    opacity:0;
}

DEMO HERE: http://jsfiddle.net/YEwUZ/512/

edited Apr 17, 2014 at 18:09

answered Apr 17, 2014 at 17:00

JCBiggar

2,5353 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Juntra Over a year ago

this works perfect! thanks!! +1 only how can i manage to make #profile-info fade out with a animation instead of the simply fadeOut function

JCBiggar Over a year ago

thanks... and if you want to add animation to it, you could just change the jquery from fadeOut to something like slideUp. DEMO: jsfiddle.net/YEwUZ/510

JCBiggar Over a year ago

Or you could set the div to position:relative; and use animation with jquery: see the demo here: jsfiddle.net/YEwUZ/511

JCBiggar Over a year ago

There is one more thing you can do to make it a little nice when it fades in: You can animate the opacity so it does everything at once: jsfiddle.net/YEwUZ/512

Jai · Accepted Answer · 2014-04-17 16:48:05Z

1

Try this:

$(document).ready(function(){
    $('#profile').click(function() {
        if($(this).css('left') !== '200px'){
        $('#profile-info').fadeIn("").addClass('animated fadeInDown');
        $('#profile').animate({left:'200px'}, 800,'swing');
       } else {
             $('#profile-info').fadeIn("").removeClass('animated fadeInDown');
        $('#profile').animate({left:'0px'}, 800,'swing'); 
       } 
    });
});

answered Apr 17, 2014 at 16:48

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Juntra Over a year ago

this works fine! only the text just will be out in an instant instead of fading out. but thanks!

krillgar · Accepted Answer · 2014-04-17 17:08:44Z

0

You can use fadeToggle(options) and toggleClass() from jQuery for this.

edited Apr 17, 2014 at 17:08

krillgar

12.9k6 gold badges56 silver badges91 bronze badges

answered Apr 17, 2014 at 16:48

Rizwan Ahmed

1462 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to make two functions react on a click

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related