twitterbootstrap で 折りたたみメニュー

2013年9月26日更新 view: 4242 view
photoBy: http://www.designtrending.com/wp-content/uploads/…

twitterbootstrap で アコーディオンメニュー

ソースを貼り付けるだけ

<div>
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">半沢直樹</a>
    </div>
    <div id="collapseOne" class="collapse in">
    
         倍返しだ
    
    </div>
</div>
<div>
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">木村拓哉</a>
    </div>
    <div id="collapseTwo" class="collapse">
    
            ちょ待てよ

    </div>
</div>
スポンサードリンク

もちろん、jqueryやbootstrap を読み込んでいる必要があるが、
最低限以上のコードで動作する。

ちなみに倍返しだ!の in の部分に in をつけておくとあらかじめ内容が表示される。

さらに開閉の矢印を付けたい場合

リストメニューの開く、閉じるみたいな感じで矢印をつけてみます。

<div class="spacer">
                    <div class="accordion-heading">
                        <!--
                            開いたら  a の class に collapsed がつく
                        -->
                        
                        
                        
                        <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">推定年収</a>
                    </div>
                    <div id="collapseTwo" class="collapse in">
                    
                            <ul class="spacer">
                                <li><a href="#">200万円~ (8367)</a></li>
                                <li><a href="#">400万円~ (633)</a></li>
                                <li><a href="#">600万円~ (267)</a></li>
                                <li><a href="#">800万円~ (103)</a></li>
                                <li><a href="#">1000万円~ (50)</a></li>
                            </ul>
                
                    </div>
                </div>

ここまでで開閉はできますよね。

さらに開閉矢印をつけます。

http://fontawesome.io/ のCSSが設定されていることが条件。
で、CSSに以下を付け加える。

.collapsed:before {
        content: "\f0da" !important;
        font-family: FontAwesome;
    
        /*--adjust as necessary--*/
        color: #000;
        padding-right: 0.5em;
        width:15px;
        display:inline-block;
    }
    
    .accordion-toggle {
        display:inline-block;
            
    }
    
    .accordion-toggle:before {
        
        
        content: "\f0d7";
        font-family: FontAwesome;
        
        /*--adjust as necessary--*/
        color: #000;
        padding-right: 0.5em;
        width:15px;
        display:inline-block;
    
    }

これで、オン、オフ時に矢印が動くようになりましたね。

他のアイコンを使いたいんだけど?

http://astronautweb.co/snippet/font-awesome/

.accordion-toggle の content に 上記の css を指定すれば色々なウェブフォントアイコンを使えます。

スポンサードリンク

関連記事

関連カテゴリ