LoginSignup
1

More than 5 years have passed since last update.

パネルのヘッダー部クリックによる開閉(Table表示対応済み)

Last updated at Posted at 2016-10-19
$(function(){
  $(".panel-body").parent().find(".panel-body, .table").hide(); //最初は非表示

  $(".panel-heading").on("click", function() {
    $(this).parent().find(".panel-body, .table").slideToggle();
  });
});

一旦パネル系はbody部を非表示。
heading部をクリックした場合は、panel内(parent())にあるbody部を(find())全て非表示。

<div class="panel panel-default">
  <div class="panel-heading"><strong class="panel-title">タイトル</strong></div>
  <div class="panel-body">
    <p>従来panel-body部</p>
  </div>
  <table class="table table-bordered table-hover table-condensed ">
    <tr class=""><td>項目1</td><td>内容</td></tr>
    <tr class=""><td>項目2</td><td>内容</td></tr>
    <tr class=""><td>項目3</td><td>内容</td></tr>
  </table>
</div>

パッケージシステムのドキュメント.png


パッケージシステムのドキュメント_2.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1