JavaScriptを使用して最小化/最大化する方法

Question

私はこのボックスを最小限に抑えるために何かを追加し、一度最小化すれば最大化する方法はありますか？

相続人のコードはボックス

<header class="info"> 
    <hgroup class="about"> 
    <h1><span class="online_users"> <span id="reload_users" class="reload_users"></span> Online</span> | <span class="room_loaded"> <span id="reload_rooms" class="reload_rooms"></span> Rooms</span></h1> 
    </hgroup> 
    <nav class="more"> 
    <a href="#buyvip">Buy VIP</a> 
    </nav> 
</header> 

と相続人のCSSを表示すること

<style type="text/css"> 
     @-webkit-keyframes show-info { 
     0% { -webkit-transform: rotateY(120deg); } 
     100% { -webkit-transform: rotateY(0deg); } 
     } 

     @-moz-keyframes show-info { 
     0% { -moz-transform: rotateY(120deg); } 
     100% { -moz-transform: rotateY(0deg); } 
     } 

     @-ms-keyframes show-info { 
     0% { -ms-transform: rotateY(120deg); } 
     100% { -ms-transform: rotateY(0deg); } 
     } 

     @-o-keyframes show-info { 
     0% { -o-transform: rotateY(120deg); } 
     100% { -o-transform: rotateY(0deg); } 
     } 

     @keyframes show-info { 
     0% { transform: rotateY(120deg); } 
     100% { transform: rotateY(0deg); } 
     } 

    .info { 
     -webkit-transition: all 180ms ease-out; 
     -moz-transition: all 180ms ease-out; 
     -ms-transition: all 180ms ease-out; 
     -o-transition: all 180ms ease-out; 
     transition: all 180ms ease-out; 

     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
     -ms-transform-style: preserve-3d; 
     -o-transform-style: preserve-3d; 
     transform-style: preserve-3d; 

     -webkit-transform: perspective(800); 
     -moz-transform: perspective(800); 
     -ms-transform: perspective(800); 
     -o-transform: perspective(800); 
     transform: perspective(800); 

     font-family: 'Quantico', sans-serif; 
     position: absolute; 
     font-size: 12px; 
     opacity: 0.65; 
     color: #fff; 
     z-index:9999; 
     width: 240px; 
     right: 210px; 
     top: 0px; 
     border: #333 solid 1px; 
     border-radius: 5px; 
    } 

    .info:hover { 
     box-shadow: 0 0 0 4px rgba(0,0,0,0.1); 
     opacity: 1.0; 
    } 

    .info h1, 
    .info h2, 
    .info h3 { 
     line-height: 1; 
     margin: 5px 0; 
    } 

    .info .about, 
    .info .more { 
     -webkit-transform-origin: 0% 50%; 
     -moz-transform-origin: 0% 50%; 
     -ms-transform-origin: 0% 50%; 
     -o-transform-origin: 0% 50%; 
     transform-origin: 0% 50%; 

     -webkit-transform: rotateY(120deg); 
     -moz-transform: rotateY(120deg); 
     -ms-transform: rotateY(120deg); 
     -o-transform: rotateY(120deg); 
     transform: rotateY(120deg); 

     margin-bottom: 1px; 
     background: rgba(0,0,0,0.95); 
     padding: 12px 15px 12px 20px; 
    } 

    .info .about { 
     -webkit-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards; 
     -moz-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards; 
     -ms-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards; 
     -o-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards; 
     animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards; 

     padding-bottom: 15px; 
    } 

    .info .about h1 { 
     letter-spacing: -1px; 
     font-weight: 300; 
     font-size: 19px; 
     opacity: 0.95; 
    } 

    .info .about h2 { 
     font-weight: 300; 
     font-size: 13px; 
     opacity: 0.8; 
    } 

    .info .about h3 { 
     text-transform: uppercase; 
     margin-top: 10px; 
     font-size: 11px; 
    } 

    .info .about h3:after { 
     margin-left: 4px; 
     font-size: 14px; 
     content: '\203A'; 
    } 

    .info .more { 
     -webkit-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards; 
     -moz-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards; 
     -ms-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards; 
     -o-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards; 
     animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards; 

     padding: 5px 15px 10px 20px; 
    } 

    .info .more a { 
     -webkit-transition: all 200ms ease-out; 
     -moz-transition: all 200ms ease-out; 
     -ms-transition: all 200ms ease-out; 
     -o-transition: all 200ms ease-out; 
     transition: all 200ms ease-out; 

     border-bottom: 1px dotted rgba(255,255,255,0.4); 
     text-transform: uppercase; 
     text-decoration: none; 
     margin-right: 10px; 
     font-size: 10px; 
     opacity: 0.6; 
     color: #fff; 
    } 

    .info .more a:hover { 
     opacity: 0.99; 
    } 
    </style> 

誰もが親切にも私がやろうとしています何を達成するためにようでしょうか？ 非常に感謝しています！

Answer 1

私は、説明上のベースを、あなたのスタイルを読んでいない：-MINと呼ばれる、あなたは2つのクラスを作ることができ と-MAX

を使用すると、MAXのスタイルを持つdiv要素にすべての箱をラップしている考えてみましょう： 、あなたが持つかもしれませんこのような何か：

<div class='my-prefix-MAX'> 
    ... 
    <button onload = "resize()">Minimaze<button> 
    ... 
<div> 

JS：

function resize(){ 
    if(this.parrentNode.className.indexOf('MIN')>-1){ 
     this.parrentNode.className.replace('MIN','MAX'); 
     this.value = 'Maximize' 
    }else{ 
     this.parrentNode.className.replace('MAX','MIN'); 
     this.value = 'Maximize' 
    } 
}