Menambahkan ikon terbuka / tertutup ke Twitter Bootstrap collapsibles (akordeon)

87

Saya telah menyiapkan versi sederhana dari akordeon Bootstrap ini :

Akordeon sederhana: http://jsfiddle.net/darrenc/cngPS/

Saat ini ikon hanya menunjuk ke bawah , tetapi apakah ada yang tahu JS apa yang diperlukan untuk diimplementasikan sehingga dapat mengubah kelas ikon menjadi:

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

... sehingga itu mengarah ke atas saat diperluas dan beralih kembali ke bawah lagi saat diciutkan, dan jadi keempat?

javascript jquery twitter-bootstrap Darren
sumber

Jawaban:

94

Inilah jawaban bagi mereka yang mencari solusi di Bootstrap 3 (seperti saya).

Bagian 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>

Bagian 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");
});

Contoh akordeon:

Contoh akordeon bootply

Andrei Veve
sumber
6
persis apa yang dibutuhkan untuk bootstrap 3.x. jika menggunakan 2.x hapus .bs.collapse. Saya juga mengubah shown and hidden to show and hidesehingga animasi terjadi sebelum akordeon terbuka.
pengguna1881482
2
ini harus menjadi jawaban yang benar karena berjalan di versi 4 juga
Andres Felipe
Bagaimana dengan akordeon bersarang? elemen anak tidak memiliki tanda pangkat tetapi saya masih mengaktifkan induknya.
esoterik
48

Inilah pendekatan saya untuk Bootstrap 2.x. Itu hanya beberapa css. Tidak diperlukan 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;
    }

Cukup tambahkan kelas akordeon-caret ke div grup akordeon, seperti ini:

<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>
Martin Wickman
sumber
2
Saya sangat menyukai pendekatan ini, Martin. Terutama karena sangat tidak mengganggu.
J Castillo
4
Saya menemukan ini berfungsi dengan satu pengecualian - tanda sisipan awal selalu ditampilkan diperluas untuk semua bagian. Setelah Anda meluaskan dan kemudian menutup lagi, itu benar.
Robb Sadler
8
@Robb - Saya menyertakan kelas "runtuh" ​​pada elemen "runtuh" ​​saya di html untuk menyelesaikan masalah dengan panah awal. HTML saya sedikit berbeda tetapi mungkin akan berhasil
Mark B
1
Saya suka solusi css juga. Beberapa rekan saya lebih nyaman menggunakan css daripada javascript, jadi ini adalah solusi yang lebih baik untuk tim saya. Terima kasih telah menangani bagian inisialisasi. Sekarang bekerja dengan baik!
Hcabnettek
42

Bootstrap collapse memiliki beberapa peristiwa yang Anda dapat bereaksi:

$(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");
    });
});
Philipp Hofmann
sumber
1
Muffls, kamu adalah bintang! bagus dan sederhana juga, terima kasih untuk itu ;-)
Darren
1
sama-sama! Anda juga dapat menggunakan tampilkan atau sembunyikan, bukan ditampilkan dan disembunyikan. Cobalah. Anda akan melihat mana yang Anda sukai.
Philipp Hofmann
1
Hai Muffs, ada ide mengapa ini tidak berfungsi di situs pengujian langsung saya? datasetcrew.co.uk/gordonedge.com
Darren
tambahkan $ (document] .ready (... in you main.js saya taruh kode di atas.
Philipp Hofmann
8
Bootstrap3: Nama acara harus memiliki .bs.collapse, sehingga di ('hide.bs.collapse') dan di ('show.bs.collapse'), atau ditampilkan / disembunyikan ketika Anda ingin menambahkan lebih banyak transisi css ke Itu.
Langeleppel
21

Gunakan pseudo-selector CSS: setelah menggunakan Glyphicons terintegrasi Bootstrap 3 untuk jawaban tanpa JS dengan sedikit modifikasi pada HTML Anda ...

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

Tambahkan class="collapsed"ke tag jangkar apa pun yang ditutup secara default.

Ini akan mengubah jangkar seperti

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

ke

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

Contoh Langsung CodePen

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

Screenshot

Bagaimana tampilannya di JSBin

bafromca.dll
sumber
1
tautan jsbin ini telah dilaporkan
Nick Bartlett
2
Pindah ke CodePen. Terima kasih telah melaporkan. Cobalah!
bafromca
16

Ditambahkan ke jawaban @muffls sehingga ini berfungsi dengan semua bootstrap twitter runtuh dan membuat perubahan ke panah sebelum animasi dimulai.

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

Bergantung pada struktur HTML Anda, Anda mungkin perlu memodifikasi file parent().

John Magnolia
sumber
1
+1 menjatuhkannya & berhasil untuk saya - baru saja dimodifikasi untuk menggunakan ikon-chevron-kanan alih-alih kiri
azcoastal
1
Yang ini berhasil untuk saya. Kode lain mengubah kelas untuk semua tab saat diklik, bukan tab yang diklik :)
vignesh
10

Saya pikir kode terbaik adalah ini:

  $('#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");
      });
pengguna2273425
sumber
2
Ini adalah satu-satunya solusi yang berfungsi bagi saya, istirahatlah, alihkan kelas dari semua grup akordeon. Cheers :)
maximus ツ
6

Jika ada yang tertarik, inilah cara Anda melakukannya dengan BS3 karena mereka mengubah nama acara:

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

Anda cukup mengubah nama kelas dalam contoh dengan yang Anda gunakan dalam kasus Anda.

noppe
sumber
1
Terima kasih b3rgstrom, saya hargai. Saya akan memeriksanya ketika saya menggunakan BS3 lagi.
Darren
1
Tidak masalah, saya pikir seseorang mungkin menemukan pertanyaan Anda di masa mendatang dengan masalah yang sama :)
noppe
5

Solusi khusus CSS yang paling mudah dibaca mungkin menggunakan atribut aria-extended. Ingatlah bahwa Anda harus menambahkan aria-expand = "false" ke semua collapse-elements karena ini tidak disetel saat dimuat (hanya pada klik pertama).

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

Bekerja dengan Bootstrap 3.x.

Andreas Bergström
sumber
1
Ini bekerja dengan sempurna. Karena tag jangkar saya adalah data-toggle, saya cukup mengubah h2 menjadi a di CSS
MC9000
3

Berikut adalah solusi saya yang selanjutnya disempurnakan dari yang diposting oleh @ john-magnolia dan memecahkan beberapa masalahnya

/**
 * 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");
    });
}

Dan inilah contoh markupnya:

<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>
Mikko Ohtamaa
sumber
1
Orang-orang yang baik - Saya merasa sangat bodoh, tetapi tidak bisa mendapatkan salah satu dari solusi ini untuk bekerja: -Satu-satunya perbedaan yang dapat saya pikirkan adalah bahwa saya menggunakan bootstrap3 baru, dan karenanya mendapatkan kelas "glyphicon glyphicon-chevron-right. Any. pointer?
benteh
2
Bootstrap 3 bukanlah rilis yang kompatibel ke belakang. Silakan merujuk ke dokumentasi Bootstrap 3 bagaimana memigrasi kode.
Mikko Ohtamaa
1
Halo, Mikko, terima kasih, ya saya mengumpulkannya, dan mendapat bantuan yang baik di sini: stackoverflow.com/questions/18147338/…
benteh
3

Solusi bootstrap v3 (di mana acara memiliki nama yang berbeda), juga menggunakan hanya satu selektor jQuery (seperti yang terlihat di sini ):

$('.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
sumber
Jawaban Luar Biasa
Naveen DA
3

Ini adalah bagaimana saya melakukannya tanpa js.

Saya menggunakan ikon glyphicon-triangle-right tetapi berfungsi dengan ikon lain, yang dilakukannya adalah menerapkan rotasi 90 derajat ke ikon ketika panel terbuka atau tidak. Saya menggunakan Bootstrap 3.3.5 untuk yang ini.

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

Ini adalah struktur HTML yang diambil dari contoh Bootstrap

<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>
General Electric
sumber
Metode ini berfungsi untuk saya, tetapi status awal diputar oleh 90deg. Bisakah Anda dengan ramah menyarankan cara membuat status awal tidak diputar (0deg)? Terima kasih!
Tsung-Ting Kuo
1
Di elemen jangkar tambahkan class = "collapsed" untuk menghindari apa yang terjadi pada Anda
General Electric
Terima kasih atas tanggapannya! Saya sebenarnya mencoba '<h4 class = "panel-title collapsed">' tetapi tidak berhasil. Apakah ini benar?
Tsung-Ting Kuo
1
Itu harus ada di tag jangkar karena itulah yang bootstrap js berubah ketika acara onClick diaktifkan, periksa di halaman ini, bekerja dengan solusi yang saya sebutkan acubavoy.com/preguntas-frequentes
General Electric
2

Tak satu pun di atas berhasil untuk saya, tetapi saya menemukan ini dan berhasil:

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

Implementasi 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>
      ...
Joshua Benson
sumber
1

@RobyAnak

RE Martin Wickman hanya versi CSS ...

Anda bisa mengatasi masalah itu dengan meletakkan akordeon-caret pada tag jangkar dan memberinya kelas yang diciutkan secara default. Seperti:

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

Itu berhasil untuk saya.

RioBrewster
sumber
1

Untuk 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");
    });
});

Terkadang Anda harus menulis demikian. Jika begitu 

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

Dibuat secara otomatis (class = "collapsed"), ketika Anda menekan menu sembunyikan.

ps ketika Anda perlu membuat menu pohon

Popov Andrey
sumber
1

Ini telah dijawab dengan berbagai cara tetapi yang saya temukan adalah yang paling sederhana dan termudah bagi saya dengan Bootstrap 3 dan font yang mengagumkan. saya baru saja melakukannya

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

Ini hanya mengubah kelas CSS dari ikon yang ingin saya tunjukkan. Saya menambahkan toggler kelas ke item yang ingin saya terapkan ini. Ini dapat ditambahkan ke item apa pun yang Anda ingin ubah menjadi ikon.

Mikha Montoya
sumber
0

Solusi tanpa javascript lain yang menggunakan fungsionalitas penciutan itu sendiri:

/* 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>
Sebastian Sangervasi
sumber
0

Untuk solusi CSS-only (dan icon-free) menggunakan Bootstrap 3 saya harus melakukan sedikit mengutak-atik berdasarkan jawaban Martin Wickman di atas.

Saya tidak menggunakan notasi akordeon- * karena dilakukan dengan panel di BS3.

Juga, saya harus memasukkan HTML awal aria-expand = "true" pada item yang terbuka saat pemuatan halaman.

Ini CSS yang saya gunakan.

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

Berikut adalah HTML bersih saya:

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

Jawaban sesingkat mungkin.

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>

Dan tentu saja, Anda dapat menggunakan apa saja untuk selektor alih-alih tag jangkar adan Anda juga dapat menggunakan pemilih tertentu daripada thisjika ikon Anda berada di luar elemen yang diklik.

Junaid
sumber
0

Berikut adalah solusi yang membuat bagian yang dapat diperluas menggunakan desain material, bootstrap 4.5 / 5 alpha dan sepenuhnya non-javascript.

Gaya untuk bagian kepala

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

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

HTML tubuh

<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>
William Worley
sumber