How To Make Two Functions React On A Click

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 sam

Solution 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><divid="profile">
            test
        </div><divid="profile-photo"></div><divid="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/

Solution 2:

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

Solution 3:

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