icon - jquery collapse()
Cambio de ícono Twitter bootstrap 3.0 en colapso (10)
Aquí está mi solución:
$(''.navbar-toggle'').on(''click'', function() {
$(this).toggleClass(''mobile-close'');
})
Ocultar barras de iconos predeterminadas:
.mobile-close span {
display: none !important;
}
Luego puede diseñar el estilo móvil, cerrar algo como:
.navbar-toggle.mobile-close {
cursor: pointer;
width: 42px;
height: 32px;
line-height: 40px;
}
.navbar-toggle.mobile-close:before {
content: "×";
font-size: 40px;
color: #231f20;
}
Esto es sobre Bootstrap 3.0. Me gustaría que el ícono / glyphicon cambie al colapso. Es decir, de una carpeta cerrada a una abierta.
He buscado a lo largo y ancho, y he leído los hilos aquí en SO, pero fue en vano. Este hilo estuvo cerca, y es básicamente lo que quiero. ¿Cómo puedo hacer que funcione en Bootstrap 3?
El código completo para colapsar múltiples div con iconos en bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Accordion with Plus/Minus Icon</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
.panel-title .glyphicon{
font-size: 14px;
}
</style>
<script>
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function(){
$(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on(''show.bs.collapse'', function(){
$(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on(''hide.bs.collapse'', function(){
$(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
});
</script>
</head>
<body>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span> What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span> What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>
<p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>
</body>
</html>
Esta es una solución basada en CSS que se basa en la implementación del colapso bootstrap.js predeterminada. No se requiere etiquetado HTML adicional (siéntase libre de reemplazar Font-Awesome con glyphicons, por supuesto).
<style>
.panel-title > a:before {
font-family: FontAwesome;
content: "/f07c";
padding-right: 5px;
}
.panel-title > a.collapsed:before {
content: "/f07b";
}
</style>
Este funciona perfectamente para el colapso del bootstrap:
<script>
$(document).ready(function () {
$(''#collapseExample'').on(''hidden.bs.collapse'', function () {
$("#btnDown").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
})
$(''#collapseExample'').on(''shown.bs.collapse'', function () {
$("#btnDown").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
})
});
</script>
Este es el código HTML que uso:
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
<button class="btn btn-default" type="button" data-toggle="collapse" data- target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<span id="btnDown" class="glyphicon glyphicon-chevron-down"></span>
Settings
</button>
Los eventos de collapse se manejan de manera diferente en Bootstrap 3. Ahora sería algo así como:
$(''#collapseDiv'').on(''shown.bs.collapse'', function () {
$(".glyphicon").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
});
$(''#collapseDiv'').on(''hidden.bs.collapse'', function () {
$(".glyphicon").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
});
Demostración: http://www.bootply.com/73101
Los eventos de colapso se manejan como:
$(''#collapse'').on(''shown.bs.collapse'', function () {
$(".glyphicon")
.removeClass("glyphicon-folder-close")
.addClass("glyphicon-folder-open");
});
$(''#collapse'').on(''hidden.bs.collapse'', function () {
$(".glyphicon")
.removeClass("glyphicon-folder-open")
.addClass("glyphicon-folder-close");
});
Para el colapso de arranque más y menos el botón de signo.
HTML
<div>
<a data-toggle="collapse" href="#other">
<h3>Others<span class="pull-right glyphicon glyphicon-plus"></span></h3>
</a>
<div id="other" class="collapse">
<h1>Others are</h1>
</div>
</div>
Javascript
$(document).ready(function () {
$(''.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");
});
});
También podría usar una clase como objetivo en lugar de una identificación.
<a data-toggle="collapse" href=".details">
<div class="details collapse in">Show details</div>
<div class="details collapse">Hide details</div>
</a>
<div class="details collapse">
...
</div>
Usando solo CSS, el ícono de colapso del bootstrap se puede cambiar con sus íconos predefinidos:
a[aria-expanded=true] .glyphicon-plus {
display: none;
}
a[aria-expanded=false] .glyphicon-minus {
display: none;
}
.pointer{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" >
<span class="pull-left title-sidebar">Filter By Price</span>
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
<span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span>
<div class="clearfix"></div>
</a>
<div id="testCollpase" class="collapse">
<ul>
<li><a href="#">500$</a></li>
<li><a href="#">1000$</a></li>
</ul>
</div>
En su HTML agregue aria-expanded="false" y agregue dos íconos a lo que necesita establecer en su barra de contracción. Me gusta,
<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" >
<span class="pull-left title-sidebar">Filter By Price</span>
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
<span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span>
</a>
Y controlarlo desde css. Cuando la barra de contracción se expande,
a[aria-expanded=true] .glyphicon-plus {
display: none;
}
de lo contrario será
a[aria-expanded=false] .glyphicon-minus {
display: none;
}
Ejecute el fragmento y creo que solo necesita esto ...
Este código encuentra su acordeón con la ID de ''Acordeón''. Cuando el evento mostrado se activa en el panel colapsado, el icono se encuentra en el panel de encabezado (el elemento anterior) y encuentra y cambia el elemento de icono de glifo dentro de ese bloque de código HTML:
$(''#accordion .panel-collapse'').on(''shown.bs.collapse'', function () {
$(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
});
//The reverse of the above on hidden event:
$(''#accordion .panel-collapse'').on(''hidden.bs.collapse'', function () {
$(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
});