bootstrap4の折り畳み(collapse)機能の実現はそんなに複雑ではありません。

特に、bootstrap3と比べて、随分簡潔になりました。

以下のドキュメントを参照したら、簡単に実現できると思います。

 

しかし、今回の問題は、折り畳み機能をコントロールするボタンの表示文字列をどうやって、折り畳みの状態により変更するということです。

例えば、以下のソースの場合

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

divが非表示になる場合、+を表示し、divが表示された場合、-を表示したいことがありますね。

 

解決案として、ピュアのJSとピュアのCSSのことで解決できます。

1. ピュアのCSSの解決案

http://jsfiddle.net/r4Bdz/

Supported Browsers

button.btn.collapsed:before
{
    content:'+' ;
    display:block;
    width:15px;
}
button.btn:before
{
    content:'-' ;
    display:block;
    width:15px;
}

2. ピュアのJSの解決案

http://jsfiddle.net/WteTy/

function handleClick()
{
    this.value = (this.value == '+' ? '-' : '+');
}
document.getElementById('collapsible').onclick=handleClick;

これでbootstrap4の折り畳み機能が完璧になりますよね。

個人的に、JSは依頼が多いですので、CSSの方が実装しやすいでしょう。

投稿タグ
,