jQuery-切换div height.onclick

我有三个div，每个div的起始高度为

120px

，其中一个

用于查看问题

带jQuery脚本的HTML：

<a class="archive-button">Click here to display more updates</a>

                <script>
                    $(document).ready(function(){
                        $('.archive-button').on('click', function(){
                            $('.files').toggle();
                        });
                    });
                </script>

<div id = "container" style = "width:100%;">
    <div id ="main" style = "float:left; width: 33%; height: 120px">
            <h2><span style="color: black";><i class="fa fa-asterisk"></i></span><u>TEST</u></h2>
                <a href="files/TEST.xls";><img src="images/xls.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.pdf" style="display: none;";><img src="images/pdf.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.xls" style="display: none;";><img src="images/xls.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp<span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
    </div>
<div id = "main" style = "float:left; width: 34%; height: 120px">
            <h2><span style="color: black";><i class="fa fa-cubes"></i></span><u>TEST</u></h2>
                <a href="files/TEST.xlsx";><img src="images/xls.png" alt=""/><p><center>TEST &nbsp <span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
                            <br>
                <a class="files" href="files/TEST.docx" style="display: none;";><img src="images/doc.png" alt=""/><p><center>TEST &nbsp <span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
    </div>
<div id = "main" style = "float:left; width: 33%; height: 120px">
            <h2><span style="color: black";><i class="fa fa-paperclip"></i></span><u>TEST</u></h2>
                <a href="files/TEST.wmv";><img src="images/video.png" alt=""/><p><center>TEST &nbsp <span style="color: black";><i class="fa fa-download"></i></span></center></p></a>
    </div>

ID是唯一的，你不能多次使用同一个。我错了。对他们应该是班级。在这两种情况下，我仍然需要3个div在切换时将高度从120px调整到1200px。
.archive-button {
        display: inline-block;
        padding: 15px 25px 15px 25px;
        background-color: #007b9d;
        background-image: -moz-linear-gradient(top, #008dad, #007b9d);
        background-image: -webkit-linear-gradient(top, #008dad, #007b9d);
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dad), to(#007b9d));
        background-image: -ms-linear-gradient(top, #008dad, #007b9d);
        background-image: -o-linear-gradient(top, #008dad, #007b9d);
        background-image: linear-gradient(top, #008dad, #007b9d);
        border-radius: 10px;
        text-transform: ;
        text-decoration: none;
        color: #fff;
        font-size: 1.2em;
        letter-spacing: -1px;
        border: solid 1px #006e8b;
        box-shadow: inset 0px 0px 0px 1px #18a8c8;
        cursor: pointer;
    }

    .archive-button:hover {
        background-color: #118eb1;
        background-image: -moz-linear-gradient(top, #1b9fbe, #118eb1);
        background-image: -webkit-linear-gradient(top, #1b9fbe, #118eb1);
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b9fbe), to(#118eb1));
        background-image: -ms-linear-gradient(top, #1b9fbe, #118eb1);
        background-image: -o-linear-gradient(top, #1b9fbe, #118eb1);
        background-image: linear-gradient(top, #1b9fbe, #118eb1);
        box-shadow: inset 0px 0px 0px 1px #3ecceb;
        cursor: pointer;
    }

/* Main */

    #main {
        background-image: url('../images/sneaker_mesh_fabric.png');
        padding: 2% 0 2% 0;
        -moz-box-shadow:    inset 0 0 10px #000000;
        -webkit-box-shadow: inset 0 0 10px #000000;
        box-shadow:         inset 0 0 10px #000000;
        text-align: center;
    }