JS控制展开与收起

有时候，我们在写查询条件的时候，查询条件会很多，会导致，查询条件就半屏幕，这样是不友好的。我们可以让查询条件，先只展示一部分，当点击展开的时候，在展示其他的，如下图:

展开前：

展开后：

思路：使用js控制。需要隐藏的放在div里面，然后有js控制。

html代码：

<form id="formId">
    <input type="hidden" id="sysBatchNumber" name="sysBatchNumber">
    <input type="hidden" id="columns3" name="columns3">
    <input type="hidden" id="limitPageSize" name="pageSize" value="10" >
    <input type="hidden" id="limitPageNo" name="pageNum" value="1">
    <div class="select-list">
        <ul>
            <li>
                <label>系统排序：</label>
                <input type="text" name="sysBatchNumberSort"/>
            </li>

            <li>
                <label>款号：</label>
                <input type="text" name="modelNum"/>
            </li>
            <li>
                <label>品名：</label>
                <input type="text" name="productName"/>
            </li>
            <li>
                <label>原厂编号：</label>
                <input type="text" name="oemNo"/>
            </li>
            <div >
                <a href="javascript:show();" id="my_btn"  > 展开↓</a>
            </div>

           <div id="hiddenli" style="display:none">
               <li>
                   <label>批次：</label>
                   <input type="text" name="batchNo"/>
               </li>
               <li>
                   <label>流水号：</label>
                   <input type="text" name="serialNumber"/>
               </li>
               <li>
                   <label>是否O2O线上商品：</label>
                   <select name="o2oFlag" th:with="type=${@dict.getType('buss_yes_no')}">
                       <option value="">所有</option>
                       <option th:each="dict : ${type