Изменение размера родительского div с помощью jQuery

Question

Я пытаюсь настроить страницу, где, когда пользователь нажимает на одну из букв в трех div, этот div изменяет размер и «закрывает» два других div на экране - но Я ударил кирпичную стену с помощью инструкции jquery - я знаю, что она включает функцию изменения размера (и, вероятно, функцию css), но я не могу понять, насколько я могу это сделать.

HTML/CSS

<div class="container"> 
    <div id="home" class="group"> <span class="lettering" id="A"> 
      A 
      </span> 

    </div> 
    <div id="portfolio" class="group" style="margin-left: -4px;"> <span class="lettering" id="P"> 
      P 
      </span> 

    </div> 
    <div id="contact" class="group" style="margin-left: -4px;"> <span class="lettering" id="C"> 
      C 
      </span> 

    </div> 
</div> 

html, body { 
    font-size: 1em; 
    background: #fff; 
    height: 100%; 
} 
.container { 
    width: 100%; 
    height: 100%; 
} 
#home { 
    background-color: #4D90FE; 
} 
.group { 
    height: 100%; 
    text-align: center; 
    position: relative; 
    display: inline-block; 
} 
#portfolio { 
    background-color: #DD4B39; 
} 
#contact { 
    background-color: #777777; 
} 
.lettering { 
    color: #fff; 
    font: bolder 7em'Bitter Bold'; 
    vertical-align: middle; 
    position: relative; 
} 

JQuery

jQuery(document).ready(function() { 
    /*------------------------ 
    Set Divs to 1/3 Width of Screen 
    ------------------------*/ 
    $(".group").css("width", ($(window).width() * 1/3)); 
    $(window).resize(function() { 
     $(".group").css('height', $(window).height()); 
     $(".group").css("width", ($(window).width() * 1/3)); 
    }); 
    /*------------------------ 
    Vertically Center Div 
    ------------------------*/ 
    $('.lettering').css("top", ($('.group').height() - $('.lettering').height())/2); 
    /*----------------------- 
    Expand Div on Element Click 
    -----------------------*/ 
    $('.lettering').click(function() { 
     $(this).parent().resize(function() { 
      /* ??? */ 
     }); 
    }); 
}); 

http://jsfiddle.net/qg8Zd/

Answer 1

Уложите все дивы абсолютна, и изменить ДИВ на то, что было щелкнул:

jQuery(document).ready(function() { 
    $(".group").each(function(index, element) 
    { 
     var len = $(".group").length; 
     //console.log((100/len * index) + "%"); 
     $(element).css("left", (100/len * index) + "%"); 
    }); 

    $('.lettering').click(function() 
    { 
     $(this).parent().animate({ width: "100%", left: 0 }, 500).css("z-index", 1); 
    }); 
}); 

Fiddle

Resize не так, как вы думаете, это событие, когда пользовательский размер окна изменяется.

/отредактированный с учетом изменений /отредактированные снова для анимации