極個人的プログラミング学習備忘録

HTML、CSS、PHP、JavaScript、Vueなどで学習したことをメモしていきます

Bootstarp4の折りたたみ(Collapse)ボタンを押すたびにボタンの表示名を変える

Bootstarp4の折りたたみ(Collapse)のサンプルより (リンク形式は省略して、ボタンのみ)

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    表示する
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

「表示する(サンプルは「Button with data-target」だがわかりやすく変更済み)」を押すたびに「Anim pariatur(以下」の表示・非表示が切り替わるが、ボタンを押したときに、「表示する」の部分を書き換えたいときがある。 その場合は、「Button with data-target」の部分をID付きのdivタグで囲っておこう。

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    <div id="btn">表示する</div>
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

あとは、Jqueryで以下のように書けばOK。

$('#collapseExample').on('hidden.bs.collapse', function () {
  $('#btn').text('表示する')
})

$('#collapseExample').on('show.bs.collapse', function () {
  $('#btn').text('非表示にする')
})

これで、ボタンの名前も一緒に切り替わるようになる。 以下は動作サンプル。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.