Bootstrap 3 Zwiń pokaż stan z ikoną Chevron

126

Korzystając z podstawowego przykładu zaczerpniętego ze strony przykładów JavaScript Bootstrap 3 dla Collapse , udało mi się pokazać stan zwinięcia za pomocą ikon jodełek.

Mam to działające przy użyciu:

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

To działa (nie w pełni przetestowane we wszystkich przeglądarkach), ale zastanawiam się, czy istnieje bardziej eleganckie rozwiązanie tego problemu?

Idealnie chciałbym użyć funkcji core, ale nie jestem pewien, jak osiągnąć z nią takie same wyniki.

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

Oto działająca wersja w jsfiddle .

Ryan Scott
źródło
Cześć, w tym przykładzie, jak zmienić cały nagłówek jako hiperłącze, a nie tylko tekst. innymi słowy, kiedy klikam panel nagłówka, a nie tylko tekst, chcę go wyświetlić, aby przełączyć. w jaki sposób mogę to zrobić?
user1447718
@ user1447718 Oto skrzypce robiące dokładnie to: JSFiddle Chciałem, aby cały nagłówek był również klikalny, więc połączyłem kilka rozwiązań, które znalazłem w SO (w tym ten).
Pieter VDE
Podobnie jak dperish, zrobiłem to
Steve Greene,

Odpowiedzi:

241

Dla następującego kodu HTML (z przykładów 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>

Efekt wizualny:

ikona chevron bootstrap3 na akordeonie

biggates
źródło
6
To działa dobrze ... oto jsFiddle dla Ciebie: jsfiddle.net/panchroma/3gYa3
David Taiaroa
6
Na skrzypcach wszystkie szewrony są początkowo skierowane w dół. Czy jest na to łatwe rozwiązanie?
wer
16
Nie widzę czystego rozwiązania CSS dla stanu początkowego; Problem polega na tym, że program bootstrap nie dodaje klasy „zwiniętej” do łącza, dopóki nie zwiniesz co najmniej jednej (nawet jeśli wszystkie są zwinięte na początku). Następnie po prostu usuwa tę klasę z linku „otwórz”. Tak więc, ponieważ „otwarte” i „domyślne” mają tę samą klasę, nie ma dobrego czystego rozwiązania CSS. Idealnie byłoby, gdyby zostało to naprawione poprzez zmodyfikowanie javascript bootstrapa, aby dodać klasę „otwartą” do różnicowania. Do tego czasu żyj z tym lub użyj JS z jednej z pozostałych odpowiedzi.
Carl Bussema
56
Wiem, że to stary post, ale aby odpowiedzieć na problem Carla - jeśli dodasz klasę „collapsed” do wszystkich tagów kotwicy za pomocą „harmonijka-przełączanie”, problemy znikną… Tak więc „zwinięty akordeon-przełącznik” ”. JQuery doda i usunie klasy, kiedy zajdzie taka potrzeba.
steakpi
5
Zmodyfikowałem ten przykład, aby można było kliknąć cały nagłówek. Jednym z drobnych błędów, które zauważyłem, jest to, że tekst po prawej stronie każdego panelu jest trochę „wypychany”, aż do zakończenia animacji otwierania / zamykania slajdu. Jeśli ktoś wie, jak to naprawić, zrób to. Oto skrzypce: Zaktualizowano JSFiddle
Pieter VDE
57

Możesz użyć tego rodzaju kodu:

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

=> Działające JsFiddle

zessx
źródło
2
To znacznie lepszy sposób zessx, dobra robota kolego. To pierwsze czyste rozwiązanie, jakie widziałem od czasu uruchomienia Bootstrap 3.
Ryan Scott,
9
Możesz również użyć$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);
Sniper Wolf
4
Jeśli wolisz, aby strzałka poruszała się na początku zawalenia zamiast na końcu, możesz użyć $('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);zamiast tego
Will Parker
To działa bardzo dobrze. Jak przyspieszyć przełączanie ikony?
Rachel S,
@RachelS Sugestia Willa Parkera przyspiesza to.
Phil Jollans
22

Aby poprawić odpowiedź z największą liczbą poprawek, niektórzy z was mogli zauważyć podczas początkowego ładowania strony, że wszystkie szewrony wskazują ten sam kierunek. Problem ten można rozwiązać, dodając klasę „zwinięta” do elementów, które mają zostać załadowane zwinięte.

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

Oto działające skrzypce: http://jsfiddle.net/3gYa3/585/

Dmidify
źródło
10

Poprawa odpowiedzi Bludream:

Zdecydowanie możesz użyć FontAwesome!

Pamiętaj, aby dodać klasę „zwinięty” do klasy „panel-header”. Klasa „zwinięta” jest dołączana dopiero po kliknięciu panelu, więc chcesz dołączyć klasę „zwiniętą”, aby wyświetlić prawidłową szewron (tj. Szewron po prawej stronie jest wyświetlany po zwinięciu, a szewron w dół po otwarciu).

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

Ponadto dobrą praktyką jest tworzenie nowej klasy zamiast korzystania z istniejącej.

Zobacz na przykład Codepen: http://codepen.io/anon/pen/PPxOJX

zamek
źródło
Oraz fontawesome 4: fa-chevron-up dla elementu i .collapsed .fa-chevron-up: before {content: "\ f077";} na zajęcia
Denis Chenu
9

Dzięki biggates i steakpi. W odpowiedzi na pytanie Dreamonic, dokonałem niewielkich zmian, aby wszystkie nagłówki były klikalne (nie tylko ciąg tytułu i gluphs) i usunąłem podkreślenie z linku. Aby wymusić pojawienie się ikon w tej samej linii, dodałem h4 na końcu instrukcji CSS. Oto zmodyfikowany kod:

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

Oraz zmodyfikowany 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;
}
Jeff_Alieffson
źródło
7

Oto kilka czystych klas pomocniczych css, które umożliwiają obsługę dowolnego rodzaju przełączania zawartości bezpośrednio w html.

Działa z każdym elementem, który musisz zmienić. Niezależnie od układu, po prostu umieszczasz go w kilku elementach z klasami .if-collapsed i .if-not-collapsed w elemencie toggle.

Jedynym haczykiem jest to, że musisz upewnić się, że ustawiłeś pożądany początkowy stan przełącznika. Jeśli jest początkowo zamknięty, umieść zwiniętą klasę na przełączniku.

Wymaga również : not selector, nie działa na IE8.

Przykład 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>

Mniej wersji:

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

Wersja CSS:

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}
Jens
źródło
6

Wiem, że to jest stare, ale ponieważ jest teraz 2018, pomyślałem, że odpowiem, poprawiając go, upraszczając kod i poprawiając wrażenia użytkownika, obracając szewron na podstawie zwinięcia lub nie. Jednak używam FontAwesome. Oto 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);
}

Oto kod HTML sekcji panelu:

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

Używam pasków bootstraps w prawo, aby pociągnąć jodełkę do końca na prawo od nagłówka panelu, który powinien być na pełnej szerokości i responsywny. CSS wykonuje całą animację i obraca szewron w zależności od tego, czy panel jest zwinięty, czy nie. Prosty.

Robert Lindabury
źródło
4

działający prosty przykład

  • uzyskać pokazany / ukryty stan ciała
  • dostać się do jego nadrzędnego att
  • Pobierz ikonę wyszukiwania
  • Zmień ikonę

wprowadź proste

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");
});
jai
źródło
2

lub ... możesz po prostu nadać taki styl.

.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

kangcireng
źródło
1

Używam niesamowitej czcionki ! i chciałem, aby panel był składany

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

i css

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

wprowadź opis obrazu tutaj

wprowadź opis obrazu tutaj

azerafati
źródło
1

Wydaje się, że Angular powoduje problemy z podejściem opartym na JavaScript (przynajmniej te, które wypróbowałem). Znalazłem to rozwiązanie tutaj: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . Istotą tego jest użycie data-ng-clickprzycisku przełącznika i wykonanie metody zmiany przycisku w kontrolerze za pomocą$scope kontekstu.

Myślę, że mógłbym podać więcej szczegółów ... moje przyciski są ustawione na glifik stanu początkowego elementu div, który zwijają (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");
    };
)
LostNomad311
źródło
1

Jednowierszowy.

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

W tym przykładzie jest używany do grupowania zwijanych wierszy tabeli. Jedyne, co musisz zrobić, to dodać nazwę klasy docelowej (my-collapse-name) do swojej ikony:

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

Możesz osiągnąć to samo z rodzimą klasą karetki Bootstrap, używając <span class='caret my-collapse-name'></span>ispan.caret.collapse.in { transform: rotate(90deg); }

dperish
źródło
0

Jeśli próbujesz użyć tego tylko z panelami (nie akordeon), wypróbuj ten kod:

<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>
Nils
źródło
-3

Zależało mi na czystym podejściu html, ponieważ chciałem zwinąć i rozwinąć kod HTML, który był dodawany w locie za pośrednictwem szablonu! Wymyśliłem to ...

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

var noJavascript = ":)";

Co może się komuś przydać :)

Mattius
źródło