div toggle in group with fade

Question

Recently, it was requested of me to figure out how to duplicate the functionality found on this site:

http://metalabdesign.com/company/

when you click on any of the employees. I tried to comb their javascript but found it near impossible. Can someone help? I need to duplicate this functionality near perfectly.

I have put together a jsfiddle with my attempt.

http://jsfiddle.net/zGaTM/

$(document).ready(function () {
    $('.the-team').click(
      function() {
        $('.social-info').hide();
        $(this).next('.social-info').addClass("showdetails");
    },

    function () {
        $(this).next('.social-info').addClass("hidedetails");
    });
});

Answer 1

Here I create it on jsfiddle Change hover to click it will work

    $(document).ready(function () {
    $('.the-team').click(  //click or hover
      function() {
          $('.social-info').hide();
          $(this).next('.social-info').show();
          $(this).next('.social-info').removeClass("hidedetails");
        $(this).next('.social-info').addClass("showdetails");
    });
});

Div .teamCont is the main container in css put float:left; to align them horizontally. If you give opacity to main container it will apply to every child inside that container. Instead if using opacity i will suggest to use transparent PNG file as background of div social-info. It will not fade out the child elements. Or check the cSS now on Final_JSfiddle. Please mark the answer.