如何隐藏使用jquery或javascript单击按钮动态打开的div？

Question

我无法关闭打开动态html的div。我不知道问题出在哪里。我甚至都没有切换div。任何人都可以帮助我吗？这是我在点击桌子上的箭头时打开引导手风琴的表格。通过点击编辑选项在手风琴中打开手风琴后，我正在显示动态html。在获得显示后，我没有通过点击取消按钮关闭它，或者甚至连切换也是......

$('.hidden-portfolio').hide();
$(".hidden-tr").click(function(event) {
  event.preventDefault();
  $('.hidden-portfolio').hide();
  var dynamic_html = $('#dynamic-content').html();
  dynamic_html = '<td colspan="6">' + dynamic_html + '</td>';
  var href = $(this).attr('href');
  $(href).replaceWith(dynamic_html);
  $(href).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-striped">
    <tbody>
      <tr align="center">
        <td align="left" class="table-heading">ICICI Pru Dynamic(G)</td>
        <td>XXXX</td>
        <td>199.6</td>
        <td>XXXX</td>
        <td>XXXX</td>
        <td>XXXX</td>
        <td>XXXX</td>
        <td>15.69%</td>
        <td>
          <a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            <img class="down-arow" src="images/down-grey.png">
          </a>
          <div id="collapseExample" class="collapse colapsed-data" role="tabpanel" aria-labelledby="headingThree">
            <div class="card-block">
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr align="center" style="background: #d9dade;">
                      <th>Date</th>
                      <th>type</th>
                      <th>quntity</th>
                      <th>price</th>
                      <th>VALUE</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody style="background: #eeeff3;">
                    <tr align="center">
                      <td>Jan 16,2014</td>
                      <td>SIP</td>
                      <td>12.6150</td>
                      <td>360.0225</td>
                      <td>2,700.00</td>
                      <td class="edit-delete-icons">
                        <a href="#hidden-portfolio-1" class="hidden-tr"><img src="images/pencil.png"></a>
                        <a class="image-delete" href="#"><img src="images/delete.png"></a>
                      </td>
                    </tr>
                    <tr style="background: #8b8b8b;" id="hidden-portfolio-1" class="hidden-portfolio edit-hidden-portfolio"></tr>
                    <tr align="center">
                      <td>Jan 16,2014</td>
                      <td>SIP</td>
                      <td>12.6150</td>
                      <td>360.0225</td>
                      <td>2,700.00</td>
                      <td class="edit-delete-icons">
                        <a href="#hidden-portfolio-2" class="hidden-tr"><img src="images/pencil.png"></a>
                        <a class="image-delete" href="#"><img src="images/delete.png"></a>
                      </td>
                    </tr>
                    <tr style="background: #8b8b8b;" id="hidden-portfolio-2" class="hidden-portfolio edit-hidden-portfolio"></tr>
                    <tr align="center">
                      <td>Jan 16,2014</td>
                      <td>SIP</td>
                      <td>12.6150</td>
                      <td>360.0225</td>
                      <td>2,700.00</td>
                      <td class="edit-delete-icons">
                        <a href="#hidden-portfolio-3" class="hidden-tr"><img src="images/pencil.png"></a>
                        <a class="image-delete" href="#"><img src="images/delete.png"></a>
                      </td>
                    </tr>
                    <tr style="background: #8b8b8b;" id="hidden-portfolio-3" class="hidden-portfolio edit-hidden-portfolio"></tr>
                    <tr align="center">
                      <td>Jan 16,2014</td>
                      <td>SIP</td>
                      <td>12.6150</td>
                      <td>360.0225</td>
                      <td>2,700.00</td>
                      <td class="edit-delete-icons">
                        <a href="#hidden-portfolio-4" class="hidden-tr"><img src="images/pencil.png"></a>
                        <a class="image-delete" href="#"><img src="images/delete.png"></a>
                      </td>
                    </tr>
                    <tr style="background: #8b8b8b;" id="hidden-portfolio-4" class="hidden-portfolio edit-hidden-portfolio"></tr>
                    <tr align="center">
                      <td>Jan 16,2014</td>
                      <td>SIP</td>
                      <td>12.6150</td>
                      <td>360.0225</td>
                      <td>2,700.00</td>
                      <td class="edit-delete-icons">
                        <a href="#hidden-portfolio-5" class="hidden-tr"><img src="images/pencil.png"></a>
                        <a class="image-delete" href="#"><img src="images/delete.png"></a>
                      </td>
                    </tr>
                    <tr style="background: #8b8b8b;" id="hidden-portfolio-5" class="hidden-portfolio edit-hidden-portfolio"></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="hide-data" id="dynamic-content">
  <div class="hide-data edit-hidden-portfolio">
    <form>
      <table>
        <tbody>
          <tr style="background: #8b8b8b;">
            <td>
              <div class="form-group">
                <label>Mutual Fund</label>
                <input type="text" class="form-control" placeholder="ICICI Pru Dynamic(G)" required />
              </div>
            </td>
            <td>
              <div class="form-group transaction-form-select">
                <label>Transaction</label>
                <select>
                    <option selected disabled hidden>Recommend</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                    <option value="4">Four</option>
                </select>
              </div>
            </td>
            <td>
              <div class="form-group">
                <label>Amount</label>
                <input type="text" class="form-control" placeholder="250" required />
              </div>
            </td>
            <td>
              <div class="form-group">
                <label>Date</label>
                <input type="date" class="form-control date-form" placeholder="16 JUl 2014" required />
              </div>
            </td>
            <td>
              <div class="form-group">
                <label>Price</label>
                <input type="text" class="form-control price-form" placeholder="4300.00" required />
              </div>
            </td>
            <td>
              <div class="row form-group button-pair">
                <div class="col">
                  <div class="form-group">
                    <button type="submit" class=" save-btn">Save</button>
                    <button type="button" class="btn close-accordian cancel-btn">Cancel</button>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</div>