ハック
2017.08.31
2,577
Bootstrap

Bootstrapのアコーディオン（Collapse）でtoggleの文言を切り替える

アコーディオンパネルが開いたときと閉じているときで、toggleの文言を切り替える方法です。

HTML

<div class="collapse" id="openBox">
開く中身
</div>
<a role="button" data-toggle="collapse" href="#openBox" aria-expanded="false" aria-controls="openBox" id="collapsible">詳細</a>

javaScript

<script type="text/javascript">
  function handleClick()
  {
    this.text = (this.text == '詳細' ? '閉じる' : '詳細');
  }
  document.getElementById('collapsible').onclick=handleClick;
</script>

参考：Twitter bootstrap collapse: change display of toggle button