Divのdiv overclickの切り替え

Question

私は2つのdivを1つ上に置く必要があります。画像をクリックすると、最初のdivスライドが上になります。

私のコードをonclickで実行することができず、代わりにAboutUsをAboutUsに変更すると、代わりに実行されますか？この

.AboutUsH { 
 
    height: 400px; 
 
    overflow: hidden; 
 
} 
 
.move-in-to-place { 
 
    position: absolute; 
 
    bottom: -100%; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #AAAAAA; 
 
    opacity: 0; 
 
    height: 0; 
 
} 
 
.AboutUsH img.clicked { 
 
    bottom: 0; 
 
    -webkit-transition: all 1s, -webkit-transform 1s; 
 
    transition: all 1s, transform 1s; 
 
    height: 100%; 
 
    opacity: 1; 
 
}

<div id="AboutUsVisual"> 
 
    <asp:Panel ID="Centering" runat="server" CssClass="Centering"> 
 
    <div runat="server" id="contattaciDe" class="contattaciDe"> 
 
     <img alt="" src="App_Themes/StandardSite/contact_blu.png" /> 
 
    </div> 
 
    <div runat="server" id="catalogoDe" class="catalogoDe"> 
 
     <a href="/pdf/Catalogo.pdf" target="_blank"> 
 
     <img alt="" src="App_Themes/catalogue_blu.png" /> 
 
     </a> 
 
    </div> 
 
    </asp:Panel> 
 
</div> 
 
<div id="AboutUs" class="Centering AboutUsH"> 
 
    <h1 id="LBLTitle" runat="server">LBLTitle</h1> 
 
    <asp:Literal ID="LTR" runat="server"></asp:Literal> 
 
    <div class="Eraser"></div> 
 
    <div id="formContact" class="move-in-to-place"> 
 
    Form content 
 
    </div> 
 
</div>

任意のアイデアのような

何か？

おかげ

Answer 1

$('.blue').click(function(){ 
    //expand red div width to 200px 
    $('.red').animate({width: "200px"}, 500); 
    setTimeout(function(){ 
     //after 500 milliseconds expand height to 800px 
     $('.red').animate({height:"800px"}, 500); 
    },500); 
    setTimeout(function(){ 
     //after 1000 milliseconds show textarea (or textbox, span, etc) 
     $('.red').find('input[type="textarea"]').show();  
    },1000); 
});