Il s’agit de Bootstrap 3.0 . Je voudrais que l’icône/le glyphicon soit modifié lors de la fermeture. Ie, d'un dossier fermé à un ouvert.
J'ai parcouru de longues distances et lu des discussions ici sur SO, mais en vain. Ce fil était proche, et est fondamentalement ce que je veux. Comment puis-je le faire fonctionner dans Bootstrap 3?
Ce code trouve votre accordéon avec l'ID de 'Accordion'. Lorsque l'événement affiché se déclenche sur le panneau réduit, l'icône se trouve dans le panneau d'en-tête (l'élément précédent) et trouve et modifie votre icône représentant un glyphe dans ce bloc de code 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");
});
Les événements collapse
sont gérés différemment dans Bootstrap 3. Ce serait quelque chose comme:
$('#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");
});
Pour les boutons plus et moins avec réduction du bootstrap.
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");
});
});
Il s’agit d’une solution basée sur CSS qui repose sur l’implémentation réduite de bootstrap.js par défaut. Aucune balise HTML supplémentaire requise (n'hésitez pas à remplacer Font-Awesome par des glyphicons, bien sûr).
<style>
.panel-title > a:before {
font-family: FontAwesome;
content: "\f07c";
padding-right: 5px;
}
.panel-title > a.collapsed:before {
content: "\f07b";
}
</style>
Vous pouvez également utiliser une classe comme cible au lieu d'un identifiant.
<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>
En utilisant uniquement CSS, l’icône de réduction de bootstrap peut être changée avec vos icônes prédéfinies:
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>
Dans votre code HTML, ajoutez aria-expanded="false"
et ajoutez deux icônes à définir dans la barre de réduction. Comme,
<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>
Et le contrôler depuis css. Lorsque la barre d'effondrement se développe alors
a[aria-expanded=true] .glyphicon-plus {
display: none;
}
sinon ce sera
a[aria-expanded=false] .glyphicon-minus {
display: none;
}
Exécutez l'extrait et je pense que vous avez juste besoin de ça ...
Les événements de réduction sont traités comme suit:
$('#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");
});
Voici ma solution:
$('.navbar-toggle').on('click', function() {
$(this).toggleClass('mobile-close');
})
Masquer les barres d'icônes par défaut:
.mobile-close span {
display: none !important;
}
Ensuite, vous pouvez styler quelque chose comme:
.navbar-toggle.mobile-close {
cursor: pointer;
width: 42px;
height: 32px;
line-height: 40px;
}
.navbar-toggle.mobile-close:before {
content: "×";
font-size: 40px;
color: #231f20;
}
Celui-ci fonctionne très bien pour l'effondrement de 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>
C'est le code HTML que j'utilise:
<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>
Le code complet pour réduire plusieurs div avec des icônes dans 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>