メソッド Methods
コラップス（collapse.js）におけるメソッド。
メソッド一覧表
| メソッド名 | 説明 |
|---|---|
| toggle |
クリック毎に表示／非表示を交互に切り換える。 |
| show |
折りたたみ可能な要素を表示する。 |
| hide |
折りたたみ可能な要素を隠す。 |
toggleメソッド
サンプル
表示したり、折り畳んだりできるコンテンツ。
ソースコード
HTML
<p> <button id="sampleToggle" class="btn btn-default"> 表示／非表示 </button> </p> <div class="collapse" id="sampleCollapse2"> <div class="well"> 表示したり、折り畳んだりできるコンテンツ。 </div> </div>
JavaScript
$(function () {
$("#sampleToggle").click(function(){
$("#sampleCollapse2").collapse('toggle');
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。
showメソッド
サンプル
表示できるコンテンツ。
ソースコード
HTML
<p> <button id="sampleShow" class="btn btn-default"> 表示 </button> </p> <div class="collapse" id="sampleCollapse3"> <div class="well"> 表示できるコンテンツ。 </div> </div>
JavaScript
$(function () {
$("#sampleShow").click(function(){
$("#sampleCollapse3").collapse('show');
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。
hideメソッド
サンプル
非表示にできるコンテンツ。
ソースコード
HTML
<p> <button id="sampleHide" class="btn btn-default"> 非表示 </button> </p> <div class="collapse in" id="sampleCollapse4"> <div class="well"> 非表示にできるコンテンツ。 </div> </div>
JavaScript
$(function () {
$("#sampleHide").click(function(){
$("#sampleCollapse4").collapse('hide');
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。