ブートストラップ3シェブロンアイコンで表示状態を折りたたむ

Bootstrap 3のJavascriptのサンプルページのCollapseのコアサンプルを使用して、シェブロンアイコンを使用して折りたたみの状態を表示できました。

私はこれを使ってこれを働いています：

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

これは機能しますが（すべてのブラウザで完全にテストされているわけではありません）、これに対するよりエレガントな解決策があるかどうか疑問に思っていますか？

理想的にはコア関数を使用したいのですが、それを使用して同じ結果を得る方法がわかりません。

$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})

これがjsfiddleで動作するバージョンです。

次のHTMLの場合（Bootstrap 3の例から）：

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>

映像効果：

次の種類のコードを使用できます。

function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

=>動作中のJsFiddle

ほとんどのアップティックで回答を改善するために、ページの最初のロード時に、山形がすべて同じ方向を指していることに気付いた方もいるでしょう。これは、折りたたんでロードする要素にクラス「collapsed」を追加することで修正されます。

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>

これが実際のフィドルです：http : //jsfiddle.net/3gYa3/585/

Bludreamの回答の改善：

FontAwesomeは間違いなく使用できます。

「折りたたみ」と「パネル見出し」クラスを必ず含めてください。「折りたたみ」クラスは、パネルをクリックするまで含まれていないため、正しい折りたたみシェブロンを表示するために「折りたたみ」クラスを含める必要があります（つまり、折りたたんだときにシェブロン右が表示され、開いたときにシェブロンダウン表示）。

HTML

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
    <div class="collapse" id="collapseOrderItems1">
        <p>Lorem ipsum...</p>
    </div>
</div>

CSS

.panel-heading .chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .chevron:after {
    content: "\f054";   
}   

また、既存のクラスを使用する代わりに、新しいクラスを作成することをお勧めします。

たとえば、Codepenを参照してください：http ://codepen.io/anon/pen/PPxOJX

biggatesとsteakpiに感謝します。Dreamonicの質問への回答として、すべてのヘッダーを（タイトル文字列とグループだけでなく）クリック可能にするように少し変更し、リンクから下線を外しました。アイコンを強制的に同じ行に表示するために、CSSの説明の最後にh4を追加しました。変更されたコードは次のとおりです。

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <h4 class="panel-title">Collapsible Group Item #1</h4>
        </a>      
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <h4 class="panel-title">Collapsible Group Item #2</h4>
        </a>      
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <h4 class="panel-title">Collapsible Group Item #3</h4>
        </a>      
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>

そして変更されたCSS：

.panel-heading .accordion-toggle h4:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  
    content: "\e114";    
    float: right;        
    color: grey;        
    overflow: no-display;
}
.panel-heading .accordion-toggle.collapsed h4:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    
}
a.accordion-toggle{
    text-decoration: none;
}

これは、HTMLであらゆる種類のトグルコンテンツを処理できる純粋なcssヘルパークラスのカップルです。

それはあなたが切り替える必要があるあらゆる要素で動作します。レイアウトが何であれ、トグル要素内の.if-collapsedクラスと.if-not-collapsedクラスを使用して、いくつかの要素の中に配置するだけです。

唯一の問題は、トグルの望ましい初期状態を確実に設定する必要があることです。最初は閉じている場合は、折りたたまれたクラスをトグルに配置します。

：notセレクターも必要です。IE8では機能しません。

HTMLの例：

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

少ないバージョン：

[data-toggle="collapse"] {
    &.collapsed .if-not-collapsed {
         display: none;
    }
    &:not(.collapsed) .if-collapsed {
         display: none;
    }
}

CSSバージョン：

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

私はこれが古いことを知っていますが、今は2018年なので、コードを簡略化してユーザーエクスペリエンスを向上させ、折りたたまれているかどうかに基づいてシェブロンを回転させることで、より良いものにしてくれると思います。FontAwesomeを使用しています。CSSは次のとおりです。

a[data-toggle="collapse"] .rotate {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}
a[data-toggle="collapse"].collapsed .rotate {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

パネルセクションのHTMLは次のとおりです。

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <i class="fa fa-chevron-right pull-right rotate"></i>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <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>

ブートストラッププルライトプルを使用して、シェブロンをパネルの見出しの右端まで引き出します。これは、全幅で応答性があるはずです。CSSはすべてのアニメーション作業を行い、パネルが折りたたまれているかどうかに基づいてシェブロンを回転させます。シンプル。

作業例

• 身体の状態を表示/非表示にする
• 親属性に到達する
• 検索アイコンを取得する
• アイコンを変更

シンプルに入る

HTML：

<body>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
        </div>
        <div id="jai" class="accordion-body collapse in">
            <div>
                <div class="accordion-inner">body content 1</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 2</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
        </div>
        <div id="collapse3" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 3</div>
            </div>
        </div>
    </div>
</body>

JavaScript

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-chevron-down")
           .removeClass("icon-chevron-down").addClass("icon-chevron-up");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-chevron-up")
           .removeClass("icon-chevron-up").addClass("icon-chevron-down");
});

または...あなたはこのようないくつかのスタイルを置くことができます

.panel-title a.collapsed {
     background: url(../img/arrow_right.png) center right no-repeat;
}
.panel-title a {
     background: url(../img/arrow_down.png) center right no-repeat;
}

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

私は素晴らしいフォントを使用しています！パネルを折りたたみ可能にしたかった

        <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>

                <div class="collapse in" id="collapseOrderItems">
                            ....
                </div>
        </div>

そしてCSS

.panel-heading .fa-chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .fa-chevron:after {
    content: "\f054";   
}

Angularは、JavaScriptベースのアプローチ（少なくとも私が試したもの）で問題を引き起こすようです。私はこの解決策をここで見つけました：http : //www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang。その要点はdata-ng-click、トグルボタンで使用し、$scopeコンテキストを使用してコントローラーのボタンを変更するメソッドを作成することです。

私はもっ​​と詳細を提供できると思います...私のボタンは、崩壊するdivの初期状態のグリフィコンに設定されています（glyphicon-chevron-right == collapsed div）。

page.html：

<div class="title-1">
    <button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button>
</div>
<div id="panel-{{ p_idx }}" class="collapse sect">
    ...
</div>

controllers.js：

.controller('PageController', function($scope, $rootScope) {
    $scope.collapse = function (event) {
        $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
    };
)

一発ギャグ。

i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }

この例では、折りたたみ可能なテーブル行をグループ化するために使用されています。あなたがしなければならない唯一のことはあなたのアイコンにターゲットクラス名（my-collapse-name）を追加することです：

<tr data-toggle="collapse" data-target=".my-collapse-name">
    <th><i class="fa fa-chevron-right my-collapse-name"></span></th>
    <th>Master Row - Title</th>
</tr>
<tr class="collapse my-collapse-name">
    <td></td>
    <td>Detail Row - Content</td>
</tr>

を使用して<span class='caret my-collapse-name'></span>、Bootstrapのネイティブキャレットクラスで同じことを達成できます。span.caret.collapse.in { transform: rotate(90deg); }

（アコーディオンではなく）パネルのみでこれを使用する場合は、次のコードを試してください。

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a>
        </h4>
    </div>
    <div id="collapseExample" class="panel-collapse collapse in">
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

テンプレートを使用してオンザフライで追加されたhtmlを折りたたんだり展開したりするため、純粋なhtmlアプローチが必要でした。これを思いついた...

https://jsfiddle.net/3mguht2y/1/

var noJavascript = ":)";

誰かに役立つかもしれません:)