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/