$(document).ready(function() {

$("#foool").click(function(){
  $(".header").animate({

    marginTop: "80px",

  }, 300 );
});


  $('#foool').click(function() {
  $('#fa').fadeIn('slow', function() {
    // Animation complete.
  });
});

  $('#foool').click(function() {
  $('#fa-2').fadeIn('slow', function() {
    // Animation complete.
  });
});

$('#foool').click(function() {
  $('#foool').fadeOut('slow', function() {
    // Animation complete.
  });
});


    $("#foool").click(function () {
    $("#foool").hide("slow");
    $("#foool-2").show("slow");
    });

$("#foool-2").click(function(){
  $(".header").animate({

    marginTop: "20px",

  }, 300 );
});

  $('#foool-2').click(function() {
  $('#fa').fadeOut('slow', function() {
    // Animation complete.
  });
});

  $('#foool-2').click(function() {
  $('#fa-2').fadeOut('slow', function() {
    // Animation complete.
  });
});


    $("#foool-2").click(function () {
    $("#foool-2").hide("slow");
    $("#foool").show("slow");
    });

});