前端实现div内容太多的时候折叠显示

折叠的实现原理

写两套内容，一套内容多的，一套内容少的，一开始的时候先把内容多的隐藏掉(display:none),点击折叠按钮的时候再把内容多显示出来，内容少的隐藏掉。

html

 //内容多的
<div class="nametemplate-info-all" style="display: none;">
        <div class="title">铭牌信息</div>
        <div class="row">
                <div>箱号</div>
                <div>SEGU9751640</div>
        </div>
        <div class="row">
                <div>尺寸箱型</div>
                <div>ZTT-203A</div>
        </div>
        <div class="row">
                <div>箱主</div>
                <div>中集集装箱运输责任有限公司</div>
        </div>
                <div class="row" id="shrink">
                <div>收缩</div>
                <div>
                        <i class="layui-icon" style="color: #FF6600">&#xe619;</i>
                </div>
        </div>
    </div>
                                        
     //内容少的
    <div class="nametemplate-info">
            <div class="title">铭牌信息</div>
            <div class="row">
                    <div>箱号</div>
                    <div>SEGU9751640</div>
            </div>
            <div class="row">
                    <div>尺寸箱型</div>
                    <div>ZTT-203A</div>
            </div>
            <div class="row" id="extend">
                    <div>展开</div>
                    <div>
                            <i class="layui-icon" style="color: #FF6600">&#xe61a;</i>
                    </div>
            </div>
    </div>

js

$("#shrink").click(function () {
    if ($(".nametemplate-info-all").css("display") == 'none') {
            $(".nametemplate-info").css("display", "none");
            $(".nametemplate-info-all").css("display", "block");
    } else {
            $(".nametemplate-info-all").css("display", "none");
            $(".nametemplate-info").css("display", "block");
    }
})