web-dev-qa-db-ja.com

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

Bootstrap accordion のこの単純なバージョンをセットアップしました。

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

現在、アイコンはdownのみを指しますが、アイコンのクラスを次のように変更するために実装する必要があるJSを誰もが知っていますか？

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

...そのため、upがexpandedで、トグルに戻るdown折りたたまれたとき、そして4番目ですか？

javascriptjquerytwitter-bootstrap
84
Darren

ここに、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アコーディオンの例

92
Andrei Veve

Bootstrap 2.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;
    }

次のように、クラスaccordion-caretをaccordion-group 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>
46
Martin Wickman

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");
    });
});
42
Philipp Hofmann

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 Liveの例

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

スクリーンショット

How it appears in JSBin

20
bafromca

@mufflsの回答に追加されたため、これはすべてのTwitter bootstrap collapseで機能し、アニメーションの開始前に矢印を変更します。

$('.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()を変更する必要がある場合があります。

16
John Magnolia

最高のコードは次のとおりだと思います。

  $('#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");
      });
10
user2273425

誰かが興味を持っている場合は、イベント名を変更したため、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');
});

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

6
rbsthlm

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

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;
}

Bootstrap 3.xで動作します。

5
Andreas Bergström

bootstrap v3ソリューション（イベントの名前が異なる場合）、jQueryセレクターを1つだけ使用する（ here のように）：

$('.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');
});
3
Geert

@ 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>
3
Mikko Ohtamaa

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

アイコンglyphicon-triangle-rightを使用しましたが、他のすべてのアイコンで機能します。パネルが開いているかどうかに関係なく、アイコンに90度の回転を適用します。このためにBootstrap 3.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>
2
General Electric

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

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>
      ...
2
Joshua Benson

これには多くの方法で答えられましたが、私が思いついたのは、Bootstrap 3とawesomeフォントで、私にとって最も簡単で簡単なものでした。今やりました

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

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

1
Micah Montoya

@RobSadler：

RE Martin Wickmanの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
RioBrewster

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
Popov Andrey

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

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>
0
JessycaFrederick

折りたたみ機能自体を使用する別の非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
Sebastian Sangervasi

最短回答。

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
Junaid