jquery - expanded - Bootstrap 3 Collapse muestra el estado con el icono de Chevron
table collapse bootstrap (12)
Utilizando el ejemplo básico extraído de la página de ejemplos de Javascript de Bootstrap 3 para Colapso , he podido mostrar el estado de colapso usando íconos de chevron.
Tengo esto trabajando usando:
$(''#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 se ha probado completamente en todos los navegadores), pero me pregunto si hay una solución más elegante para esto.
Idealmente, me gustaría utilizar la función central, pero no estoy seguro de cómo lograr los mismos resultados con ella.
$(''#accordion'').on(''hidden.bs.collapse'', function () {
//do something...
})
Aquí hay una versión funcional en jsfiddle .
¡Estoy usando fuentes increíbles ! y quería un panel para ser plegable
<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";
}
Angular parece causar problemas con los enfoques basados en JavaScript aquí (al menos los que he probado). Encontré esta solución aquí: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . La esencia de esto es usar data-ng-click en el botón de alternar y hacer el método para cambiar el botón en el controlador usando el contexto $scope .
Supongo que podría proporcionar más detalles ... mis botones están configurados en el glyphicon del estado inicial del div que colapsan (glyphicon-chevron-right == collateded 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");
};
)
Aquí hay un par de clases de CSS puro que te permiten manejar cualquier tipo de contenido de alternar directamente en tu html.
Funciona con cualquier elemento que necesite cambiar. Cualquiera que sea su diseño, simplemente lo coloca dentro de un par de elementos con las clases .if-collapsed y .if-not-collapsed dentro del elemento de alternar.
La única pega es que debes asegurarte de poner el estado inicial deseado de alternar. Si está cerrado inicialmente, coloca una clase contraída en el alternar.
También requiere el selector : no , no funciona en IE8.
Ejemplo 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>
Menos versión:
[data-toggle="collapse"] {
&.collapsed .if-not-collapsed {
display: none;
}
&:not(.collapsed) .if-collapsed {
display: none;
}
}
Versión CSS:
[data-toggle="collapse"].collapsed .if-not-collapsed {
display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
Gracias a biggates y steakpi. Como respuesta a la pregunta de Dreamonic, hice algunos pequeños cambios para hacer que todos los encabezados se puedan hacer clic (no solo la cadena del título y los gluphs) y quité el subrayado del enlace. Para forzar que aparezcan iconos en la misma línea, agregué h4 al final de las instrucciones de 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 el CSS modificado:
.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;
}
Mejora en la respuesta de Bludream:
¡Definitivamente puedes usar FontAwesome!
Asegúrese de incluir "colapsado" junto con la clase "encabezado del panel". La clase "contraída" no se incluye hasta que haga clic en el panel, por lo que desea incluir la clase "contraída" para mostrar el cheurón correcto (es decir, chevron-right se muestra cuando se contrae y chevron-down 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";
}
Además, es una buena práctica crear una nueva clase en lugar de usar una clase existente.
Ver Codepen por ejemplo: http://codepen.io/anon/pen/PPxOJX
Para el siguiente HTML (de ejemplos de 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>
Efecto visual:
Para mejorar la respuesta con la mayoría de los upticks, algunos de ustedes pueden haber notado en la carga inicial de la página que todos los galones apuntan en la misma dirección. Esto se corrige al agregar la clase "contraída" a los elementos que desea cargar colapsados.
<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í hay un violín funcional: http://jsfiddle.net/3gYa3/585/
Podría usar 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);
=> Working JsFiddle
Quería un enfoque html puro, ya que quería colapsar y expandir html que se agregó sobre la marcha a través de una plantilla. Se me ocurrió esto ...
https://jsfiddle.net/3mguht2y/1/
var noJavascript = ":)";
Que podría ser útil para alguien :)
Si está tratando de usar esto solo con paneles (no de acuerdo), pruebe 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>
ejemplo simple de trabajo
- obtener la condición del cuerpo que se muestra / esconder
- llegar a su padre att
- obtener icono de buscar
- cambiar el ícono
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");
});
o ... simplemente puedes poner un estilo como este.
.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;
}