Jquery Split screen Image Hover

Jquery Split screen Image Hover

I have a full page split into 6 sections with a background images in each section. Also in each section there will be a <article> element. 

**What I want to do**  When you click on a .section all the other <article> elements will fade out except for the one that is in the section that was clicked. Once the .section expands I have an .excerpt that fades in along with an X to close. When you click the X I need it to close and fade out the .excerpt and fade back in all the <article> elements that were previously faded out.

**What it is doing** When I click on an .section all the <articles> fade out and then the main <article> fades in once the .section expands. And even WORSE when you click the close it shrinks back down and then expands the farthest right .section. I need it to shrink back down and fade in the <articles> again.

Here is the jquery snippet I am using:

  1.     $('.wrapper > div').click(function() {
  2.       $(this).toggleClass('go');
  3.       if($(this).hasClass('go')){
  4.         $('article').animate({opacity: '0'}, 100);
  5.          $(this).find('.close, .excerpt, article').delay(1000).animate({opacity: '1'}, 400);
  6.         $(this).animate({'width':'100%'},{
  7.           duration: 1000,
  8.           step:function(gox){
  9.             var width = gox < 100 ? (100 - gox) / 5 : 0;
  10.                     $(this).siblings().css('width', width + "%");
  11.             }
  12.           });
  13.       }
  14.     });
  15.     
  16.     $('.close').click(function(){
  17.       $('.wrapper > div').animate({'width':'16.66%'}, 1000);
  18.       $('.close, .excerpt').animate({opacity: '0'}, 400);
  19.       $('article').animate({opacity: '1'}, 100);
  20.     }); 


Here is a working sample: http://www.legiondesigns.com/webtype/



Any help would be greatly appreciated. I am somewhat familiar with jQuery but I am still learning so please be patient with me. :)