Utilizando el núcleo ejemplo tomado de la Bootstrap 3 Javascript ejemplos de la página de Colapso,
He sido capaz de mostrar el estado de colapso uso de chevron iconos.

Tengo este trabajo mediante:

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

Esto funciona (no totalmente probado en todos los navegadores), pero me pregunto si hay una solución más elegante?

Idealmente me gustaría utilizar la función principal, pero no estoy seguro de cómo lograr los mismos resultados con ella.

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

He aquí una versión de trabajo en jsfiddle.

  • Hola, en este ejemplo, ¿cómo puedo hacer que toda la dirección de un hipervínculo en lugar de sólo el texto. en otras palabras, cuando hago clic en el título del panel, no sólo el texto, quiero mostrar a cambio. ¿cómo puedo hacer eso?
  • Similar: stackoverflow.com/questions/19024218/…
  • Aquí un violín haciendo exactamente eso: JSFiddle quería toda la cabecera puede hacer clic también, así que he combinado algunas de las soluciones que he encontrado a través de TAN (incluyendo esta).
InformationsquelleAutor Ryan Scott | 2013-08-20

14 Comentarios

  1. 232

    Para el siguiente código HTML (de Bootstrap 3 ejemplos):

    CSS:

    .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 */
    }

    HTML:

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

    Efecto Visual:

    Bootstrap 3 Colapso mostrar estado con Chevron icono

    • Esto funciona bien … aquí es un jsFiddle para usted: jsfiddle.net/panchroma/3gYa3
    • Solución agradable biggates. Creo que voy a adoptar su método en lugar de utilizar Javascript. Los navegadores más antiguos pueden vivir sin las comillas angulares. Bien hecho
    • En el violín, todos los galones del punto inicial. Hay una solución fácil para que?
    • No veo un puro CSS solución para el estado inicial; el problema aquí es que bootstrap no añadir la clase «colapsado» para el enlace hasta que el colapso de al menos un (incluso si todo se derrumbó para empezar). A continuación, simplemente elimina de esa clase desde el enlace «abrir». Así que desde «abierto» y «por defecto» tiene la misma clase, no hay un buen puro CSS solución. Lo ideal sería que se fija mediante la modificación de bootstrap javascript para agregar un «abierto» de la clase a diferenciar. Hasta entonces, vivir con ella, o el uso de JS de una de las otras respuestas.
    • Sé que este es un viejo post, pero la respuesta de Carl problema – si se añade la clase de «colapsado» en todas las etiquetas de anclaje con «acordeón-toggle», sus problemas se va…. Así lo han «acordeón-alternar colapsado». JQuery continuación, añadir y quitar clases cuando sea necesario.
    • Funciona muy bien! Me tomé la libertad de crear este en bootply: bootply.com/O9KrlN6pnp
    • He modificado este ejemplo para que todo el encabezado se puede hacer clic. Un pequeño error que me di cuenta es que el texto a la derecha de cada panel es «empujado» un poco hasta que después de la presentación de apertura/cierre de la animación completa. Si alguien sabe cómo arreglarlo, por favor. Aquí está el violín: Actualizado JSFiddle
    • Gracias a biggates y steakpi
    • Buscado esto por horas – gracias por la pregunta y la respuesta!
    • Gracias por este CSS sugerencia, yo personalmente se utiliza sólo la right-chevron con una animación de rotación -90deg
    • Hecha por los enlaces dentro de él .en el panel de título elementos de bloque, lo que permite que usted haga clic en la totalidad de la anchura del panel de título / título área.
    • El origen de la «empujado» bug es el float:left en el css. Sin embargo, no veo una solución simple/alternativa.
    • Gracias por este. Justo lo que necesitaba ahora mismo.
    • Gracias, además, para Más: \002b y Menos : \2212 , la esperanza de ayuda.
    • Aunque esta solución funciona, todavía no resuelve/explicar controlar el estado inicial de la chevron. Tengo una respuesta a este post de abajo que entra en detalles sobre cómo controlar el estado inicial.
    • Sugiero a <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> prueba aquí jsfiddle.net/3LLeayog
    • Muy Buena Solución. Funciona bien para mí. Gracias

  2. 57

    Usted podría utilizar este tipo de código :

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

    => Trabajo JsFiddle

    • Esa es una manera mucho mejor zessx, bien hecho compañero. Esta es la primera solución limpia que he visto desde que Bootstrap 3 puso en marcha.
    • Esto es bastante impresionante, funciona a la perfección, bonito y limpio solución, gracias por eso.
    • Usted podría utilizar también $('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);
    • Si usted prefiere la flecha para mover al principio del colapso en lugar de al final puede utilizar $('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron); lugar
    • Esto funciona muy bien. ¿Cómo puedo hacer que el icono alternar más rápido?
    • La propuesta de Will Parker hace más rápido.

  3. 21

    Para mejorar la respuesta con la mayoría de los repuntes, algunos de ustedes pueden haber notado en la carga inicial de la página que el angulares de todos apuntan en la misma dirección. Este es corregida mediante la adición de la clase «colapsado» a los elementos que desea cargar se derrumbó.

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

    Aquí es un trabajo de violín: http://jsfiddle.net/3gYa3/585/

    • Gracias por este. Me salvó la molestia de averiguar lo que ocurría a mí mismo 😀
  4. 9

    Gracias a biggates y steakpi.
    Como respuesta de la pregunta Dreamonic, hice un poco de cambios para hacer que todos los encabezados clickable (no sólo el título de cadena y gluphs) y se quitó el subrayado del enlace.
    A fuerza de iconos aparecen en la misma línea he añadido h4 al final de las instrucciones CSS. Aquí está el código modificado:

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

    Y la modificación de 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;
    }
  5. 9

    Mejora en Bludream la respuesta:

    Definitivamente, usted puede usar FontAwesome!

    Asegúrese de incluir «colapsado», junto con «en el panel de la rúbrica» de la clase. El «colapsado» la clase no está incluido hasta que haga clic en en el panel de manera que usted desea incluir la «colapsado» de la clase con el fin de mostrar la correcta chevron (es decir, chevron-derecha se muestra cuando se derrumbó y chevron-abajo cuando está abierto).

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

    También, es una buena práctica es crear una nueva clase en lugar de utilizar una clase existente.

    Ver Codepen por ejemplo: http://codepen.io/anon/pen/PPxOJX

    • Y con fontawesome 4 : fa-chevron-up para el elemento y .se derrumbó .fa-chevron-up:before { content: «\f077»;} para la clase
  6. 7

    He aquí un par de puro css clases de ayuda que le permite manejar cualquier tipo de alternar el contenido en html.

    Funciona con cualquier elemento que usted necesita para cambiar. Sea cual sea su diseño es el que acaba de poner dentro de un par de elementos con el .si-se derrumbó y .si-no-se derrumbó clases dentro de la alternancia del elemento.

    El único inconveniente es que usted tiene que asegurarse de poner el deseado estado inicial de la alternancia. Si es un principio cerrado, a continuación, poner una se derrumbó clase en la alternancia.

    También se requiere la :no selector, no funciona en IE8.

    HTML ejemplo:

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

    Menos de la versión:

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

    Versión de CSS:

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

    Sé que esto es viejo, pero dado que ahora 2018, pensé que me iba a responder lo que es mejor simplificar el código y mejorar la experiencia del usuario, haciendo que el chevron rotar en base a la colapsado o no. Estoy usando FontAwesome sin embargo. Aquí está el 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);
    }

    Aquí está el código HTML de la sección del panel:

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

    Puedo usar zapatos de pull-derecha para tirar de la chevron todo el camino a la derecha del panel de encabezado que debe estar lleno de ancho y capacidad de respuesta. El CSS no todo el trabajo de animación y gira la chevron basado en si el panel está contraído o no. Simple.

  8. 4

    de trabajo simple ejemplo

    • obtener la condición corporal muestra/oculta
    • de su padre att
    • conseguir encontrar el icono de
    • cambiar icono

    introduzca simple

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

    Estoy usando fuente impresionante! y quería un panel que puede contraerse

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

    y el css

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

    Bootstrap 3 Colapso mostrar estado con Chevron icono

    Bootstrap 3 Colapso mostrar estado con Chevron icono

  10. 1

    Angular parece causar problemas con el JavaScript basado en los enfoques de aquí ( al menos los que yo he probado ) . He encontrado esta solución aquí: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . El quid de la cuestión es el uso de data-ng-click en el botón de alternar y hacer que el método para cambiar el botón en el controlador usando el $scope contexto .

    Supongo que podría dar más detalles…
    a mi los botones están configurados para el glyphicon del estado inicial de la div de que se derrumbe ( glyphicon-chevron-derecho == derrumbó 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");
    };
    )
  11. 0

    Si usted está tratando de usar esto con paneles (no accordeon), prueba este código:

    <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>
  12. 0

    One-liner.

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

    En este ejemplo se utiliza para agrupar plegable filas de la tabla. La única cosa que usted necesita hacer es agregar el nombre de clase de destino (mi-colapso-nombre) a su icono:

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

    Puede realizar el mismo con Bootstrap nativo del signo de intercalación de clase mediante el uso de <span class='caret my-collapse-name'></span> y span.caret.collapse.in { transform: rotate(90deg); }

  13. -3

    Yo quería puro html enfoque como yo quería contraer y expandir html que se añadió sobre la marcha a través de una plantilla! Se me ocurrió esto…

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

    var noJavascript = ":)";

    Que pueda ser de utilidad a alguien 🙂

    • Tu sigue usando el javascript de bootstrap…

Dejar respuesta

Please enter your comment!
Please enter your name here