Twitter Bootstrap折りたたみ式（アコーディオン）に開いた/閉じたアイコンを追加する

87

Bootstrapアコーディオンのこの単純なバージョンを設定しました：

単純なアコーディオン： http ：//jsfiddle.net/darrenc/cngPS/

現在、アイコンは下を向いているだけですが、アイコンのクラスを次のように変更するために、どのJSを実装する必要があるかを誰もが知っています。

<i class="icon-chevron-up"></i>

...ので、それが指していることをアップしたときに拡大し、トグルにバックダウンので、第四崩壊したときに、再び、と？

javascript  jquery  twitter-bootstrap 
— ダレン
ソース

回答:

94

これが、Bootstrap 3（私のように）で解決策を探している人のための答えです。

HTML部分：

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    <span class="glyphicon glyphicon-minus"></span>
  </button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>

jsの部分：

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

アコーディオンの例：

Bootplyアコーディオンの例

— アンドレイ・ヴェヴェ
ソース
6
まさにブートストラップ3.xに必要なもの。2.xを使用している場合は削除し.bs.collapseます。またshown and hidden to show and hide、アコーディオンが開く前にアニメーションが発生するように変更しました。
— user1881482 2013年
2
バージョン4でも実行されるため、これは正しい答えになるはずです
— Andres Felipe
入れ子になったアコーディオンはどうですか？子要素にはシェブロンがありませんが、親のスイッチはまだ取得しています。
— 難解な
48

これがBootstrap2.xに対する私のアプローチです。それはほんの一部のCSSです。JavaScriptは必要ありません：

    .accordion-caret .accordion-toggle:hover {
        text-decoration: none;
    }
    .accordion-caret .accordion-toggle:hover span,
    .accordion-caret .accordion-toggle:hover strong {
        text-decoration: underline;
    }
    .accordion-caret .accordion-toggle:before {
        font-size: 25px;
        vertical-align: -3px;
    }
    .accordion-caret .accordion-toggle:not(.collapsed):before {
        content: "▾";
        margin-right: 0px;
    }
    .accordion-caret .accordion-toggle.collapsed:before {
        content: "▸";
        margin-right: 0px;
    }

次のように、クラスアコーディオンキャレットをアコーディオングループdivに追加するだけです。

<div class="accordion-group accordion-caret">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
            <strong>Header</strong>
        </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
        <div class="accordion-inner">
            Content
        </div>
    </div>
</div>
— マーティンウィックマン
ソース
2
私はこのアプローチマーティンが本当に好きでした。特に目立たないからです。
— J Castillo
4
これは1つの例外を除いて機能することがわかりました。最初のキャレットは、すべてのセクションで常に展開されて表示されます。展開してから再び折りたたむと、それは正しいです。
— Robb Sadler 2014年
8
@ Robb-最初の矢印の問題を解決するために、htmlの「collapse」要素に「collapsed」クラスを含めました。私のhtmlは少し異なりますが、おそらく機能します
— Mark B
1
私はcssソリューションも好きです。私の仲間の中には、JavaScriptよりもCSSの方が快適な人もいるので、これは私のチームにとってより良い解決策でした。初期化部分に対処していただきありがとうございます。今ではうまくいきます！
— hcabnettek 2014
42

Bootstrap Collapseには、対応できるイベントがいくつかあります。

$(document).ready(function(){    
    $('#accordProfile').on('shown', function () {
       $(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
    });

    $('#accordProfile').on('hidden', function () {
       $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
    });
});
— フィリップ・ホフマン
ソース
1
マフルズ、あなたはスターです！素晴らしくてシンプルです、ありがとう;-)
— ダレン
1
どういたしまして！表示と非表示の代わりに、表示または非表示を使用することもできます。やってみて。どちらが好きかがわかります。
— フィリップホフマン2012
1
こんにちはマフス、これが私のライブテストサイトで機能しない理由はありますか？datascrew.co.uk/gordonedge.com
— ダレン
あなたは、私は上記のコードを入れているmain.jsに... .ready $（文書を）（追加。
— フィリップ・ホフマンに
8
Bootstrap3：イベント名には.bs.collapseを付ける必要があるため、on（ 'hide.bs.collapse'）とon（ 'show.bs.collapse'）にするか、cssトランジションを追加するときに表示/非表示にします。それ。
— ランゲレッペル2014年
21

CSSes疑似セレクターを使用します：Bootstrap 3の統合されたGlyphiconsを使用した後、HTMLにわずかな変更を加えたJSなしの回答...

CSS

.panel-heading [data-toggle="collapse"]:after
{
    font-family: 'Glyphicons Halflings';
    content: "\e072"; /* "play" icon */
    float: right;
    color: #b0c5d8;
    font-size: 18px;
    line-height: 22px;

    /* rotate "play" icon from > (right arrow) to down arrow */
    -webkit-transform: rotate(-90deg);
    -moz-transform:    rotate(-90deg);
    -ms-transform:     rotate(-90deg);
    -o-transform:      rotate(-90deg);
    transform:         rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
    /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(90deg);
    -moz-transform:    rotate(90deg);
    -ms-transform:     rotate(90deg);
    -o-transform:      rotate(90deg);
    transform:         rotate(90deg);
}

HTML

class="collapsed"デフォルトで閉じられているアンカータグに追加します。

これにより、次のようなアンカーが回転します

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

に

<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

CodePenライブの例

http://codepen.io/anon/pen/VYobER

スクリーンショット

JSBinでの表示方法

— バフロムカ
ソース
1
このjsbinリンクが報告されました
— Nick Bartlett
2
それをCodePenに移動しました。報告していただきありがとうございます。試してみる！
— bafromca 2014年
16

@mufflsの回答に追加されたため、これはすべてのTwitterブートストラップの折りたたみで機能し、アニメーションが開始される前に矢印に変更を加えます。

$('.collapse').on('show', function(){
    $(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
    $(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});

HTML構造によっては、を変更する必要がある場合がありますparent()。

— ジョン・マグノリア
ソース
1
1はそれを落とし＆それが私のために働いた-ちょうど使用アイコンシェブロン右に変更はなく、左
— azcoastal
1
これは私のために働きます。他のコードは、クリックされたタブの代わりにクリックされたときにすべてのタブのクラスを変更します:)
— vignesh 2013年
10

最高のコードは次のとおりです。

  $('#accordion1').collapse({
    toggle: false
  }).on('show',function (e) {
        $(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
      }).on('hide', function (e) {
        $(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
      });
— user2273425
ソース
2
これは私にとって唯一の実用的な解決策です。残りはすべてのアコーディオングループのクラスを切り替えます。乾杯：）
— maximusツ2013
6

誰かが興味を持っているなら、彼らがイベント名を変更したので、これはあなたがBS3でそれをする方法です：

$('.collapse').on('show.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-down fa-caret-right');
});

例のクラス名を、ケースで使用するクラス名に変更するだけです。

— rbsthlm
ソース
1
b3rgstromに感謝します。次にBS3を使用するときに確認します。
— ダレン
1
問題はありません。誰かが将来同じ問題であなたの質問を見つけるかもしれないと思っていました：）
— rbsthlm 2013年
5

最も読みやすいCSSのみの解決策は、おそらくaria-expanded属性を使用することです。これはロード時に設定されないため（最初のクリック時のみ）、すべてのcollapse-elementsにaria-expanded = "false"を追加する必要があることに注意してください。

HTML：

<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>

CSS：

h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
    display: none;
}

h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
    display: inline;
}

Bootstrap3.xで動作します。

— AndreasBergström
ソース
1
これは完全に機能します。私のアンカータグはデータトグルだったので、CSSでh2をaに変更しただけです
— MC90 0019年
3

これが@ john-magnoliaによって投稿されたものからさらに洗練され、その問題のいくつかを解決する私の解決策です

/**
 * Toggle on/off arrow for Twitter Bootstrap collapsibles.
 *
 * Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
 */
function animateCollapsibles() {

    $('.collapse').on('show', function() {
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
    }).on('hide', function(){
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
    });
}

そして、これがマークアップの例です。

<div class="accordion" id="accordion-send">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
                <i class="icon icon-chevron-right"></i> Send notice
            </a>
        </div>
        <div id="collapse-refund" class="accordion-body collapse">
            <div class="accordion-inner">
                <p>Lorem ipsum Toholampi city</p>
            </div>
        </div>
    </div>
</div>
— 大玉ミッコ
ソース
1
良い人たち-私はばかげていると感じますが、これらのソリューションのどちらも機能させることができません：-S私が考えることができる唯一の違いは、新しいbootstrap3を使用しているため、クラス「glyphiconglyphicon-chevron-right」を取得することです。ポインタ？
— ベンテ2013
2
Bootstrap 3は、下位互換性のあるリリースではありません。コードを移行する方法については、Bootstrap3のドキュメントを参照してください。
— Mikko Ohtamaa 2013
1
こんにちは、ミッコは、はい、私はそれを集め、あなたに感謝し、ここで良いの助けを得た：stackoverflow.com/questions/18147338/...
— benteh
3

ブートストラップv3ソリューション（イベントの名前が異なる）。jQueryセレクターを1つだけ使用します（ここを参照）。

$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
    $(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
— Geert
ソース
優れた回答
— NaveenDA18年
3

これは私がjsなしでそれを行う方法です。

アイコンglyphicon-triangle-rightを使用しましたが、他のアイコンでも機能します。パネルが開いているかどうかに関係なく、アイコンに90度の回転が適用されます。これにはBootstrap3.3.5を使用しています。

CSSコード

h4.panel-title a {
    display: block;

}
h4.panel-title a.collapsed .glyphicon-triangle-right {
        color: #ada9a9 !important;
        transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
        color: #515e64 !important;
        transform: rotate(90deg);
}

これは、Bootstrapの例から取得したHTML構造です。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingOne">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            Proven Expertise
                                            <span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                    <div class="panel-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>

                        </div>
— ゼネラルエレクトリック
ソース
この方法は私にとってはうまくいきますが、初期状態は90度回転します。初期状態を回転させない（0度）方法を教えてください。ありがとう！
— Tsung-Ting Kuo
1
アンカー要素にclass = "collapsed"を追加して、何が起こっているかを回避します
— General Electric
返信ありがとうございます！実際に「<h4class = "panel-titlecollapsed">」を試しましたがうまくいきませんでした。これは正しいでしょうか？
— Tsung-Ting Kuo
1
onClickイベントが発生したときにブートストラップjsが変更されるため、アンカータグ上にある必要があります。このページを確認してください。acubavoy.com/ preguntas
— General Electric
2

上記のどれも私にはうまくいきませんでしたが、私はこれを思いつきました、そしてそれはうまくいきました：

function toggleChevron(el) {
  if ($(el).find('i').hasClass('icon-chevron-left'))
      $(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
  else 
      $(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}

HTMLの実装：

<div class="accordion" id="accordion-send">
  <div class="accordion-group">
    <div class="accordion-heading" onClick="toggleChevron(this)">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
        <i class="icon icon-chevron-right"></i> Send notice
      </a>
      ...
— ジョシュア・ベンソン
ソース
1

@RobSadler：

RE MartinWickmanのCSSのみのバージョン...

この問題を回避するには、アンカータグにアコーディオンキャレットを配置し、デフォルトで折りたたまれたクラスを指定します。そのようです：

<div class="accordion-group">
<div class="accordion-heading">
    <a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
        <strong>Header</strong>
    </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="accordion-inner">
        Content
    </div>
</div>

それは私のために働いた。

— リオブリュースター
ソース
1

Bootstrup 3.2 + FontAwesomeの場合

$(document).ready(function(){    
    $('#accordProfile').on('shown.bs.collapse', function () {
       $(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
    });

    $('#accordProfile').on('hidden.bs.collapse', function () {
       $(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
    });
});

時々あなたはそう書かなければなりません。もしそうなら 

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');

非表示メニューを押すと、自動的に生成されます（class = "collapsed"）。

ツリーメニューを作成する必要がある場合のps

— ポポフアンドレイ
ソース
1

これにはさまざまな方法で答えられていますが、私が思いついたのは、Bootstrap3とfontawesomeで、私にとって最も単純で簡単なことでした。今やりました

$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});

これは、表示したいアイコンのCSSクラスを切り替えるだけです。これを適用したいアイテムにクラストグルを追加します。これは、アイコンを切り替えたい任意のアイテムに追加できます。

— ミカモントーヤ
ソース
0

折りたたみ機能自体を使用する別のJavaScriptなしのソリューション：

/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
  display: inline; }
.expand-icon.collapsing {
  display: none; }

/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
 <span class="my-collapse collapse-icon collapse in">
  <span class="glyphicon glyphicon-collapse-up"></span>
 </span>
 <span class="my-collapse expand-icon collapse">
  <span class="glyphicon glyphicon-expand"></span>   
 </span>
</a>
— セバスチャンサンガーヴァシ
ソース
0

Bootstrap 3を使用したCSSのみ（およびアイコンなし）のソリューションの場合、上記のMartinWickmanの回答に基づいて少し手を加える必要がありました。

BS3のパネルで行われているため、アコーディオン*表記は使用しませんでした。

また、ページの読み込み時に開くアイテムの最初のHTML aria-expanded = "true"に含める必要がありました。

これが私が使用したCSSです。

.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }

これが私のサニタイズされたHTMLです：

<div id="acc1">    
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
                    </a>
            </span>
        </div>
        <div id=“acc1-1” class="panel-collapse collapse in">
            <div class="panel-body">
                Text 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
                    </a>
            </span>
        </div>
        <div id=“acc1-2” class="panel-collapse collapse">
            <div class="panel-body">
                Text 2                  
            </div>
        </div>
    </div>
</div>
— JessycaFrederick
ソース
0

可能な限り最短の答え。

HTML

<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
    <span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>

JS：

<script type="text/javascript">
 $(function () {
     $('a[data-toggle="collapse"]').click(function () {
     $(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
     })
 })
 </script>

もちろん、アンカータグの代わりにセレクターに何でもa使用できます。またthis、アイコンがクリックした要素の外側にある場合の代わりに、特定のセレクターを使用することもできます。

— ジュナイド
ソース
0

これは、ある程度マテリアルデザイン、ブートストラップ4.5 / 5アルファ、および完全に非JavaScriptを使用して拡張可能なセクションを作成するソリューションです。

ヘッドセクションのスタイル

<style>
[data-toggle="collapse"] .fa:before {
    content: "\f077";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f078";
}
</style>

本文html

<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
    <i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
    CONTENT GOES IN HERE
</div>
— ウィリアム・ウォーリー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.