Question
This is about Bootstrap 3.0. I would like the icon/glyphicon to change on collapse. I.e, from a closed folder to an open one.
I have searched far and wide, and have read threads here on SO, but to no avail. This thread was close, and is basically what I want. How can I make it work in Bootstrap 3?
Solution 4
This is a CSS-based solution that relies on the default bootstrap.js collapse implementation. No additional HTML markup required (feel free to replace Font-Awesome with glyphicons, of course).
https://stackoverflow.com/questions/18147338
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<style>
.panel-title > a:before {
font-family: FontAwesome;
content: "\f07c";
padding-right: 5px;
}
.panel-title > a.collapsed:before {
content: "\f07b";
}
</style>
OTHER TIPS
The collapse events are handled differently in Bootstrap 3. Now it would be something like:
$('#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");
});
This code finds your accordion with the ID of 'Accordion'. When the shown event fires on the collapsed panel, the icon is found in the header panel (the previous element) and it finds and changes your glyph icon element within that HTML code block:
$('#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");
});
For bootstrap collapse plus and minus sign button.
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");
});
});
You could also use a class as target instead of an id.
<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>
Using only CSS, the bootstrap collapse icon can be changed with your predefined icons:
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>In your HTML add aria-expanded="false" and add two icons what you need to set in your collapse bar. Like,
<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>
And control it from css. When collapse bar expand then
a[aria-expanded=true] .glyphicon-plus {
display: none;
}
otherwise it will be
a[aria-expanded=false] .glyphicon-minus {
display: none;
}
Run the snippet and I think you just need this...
The collapse events are handled as:
$('#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");
});
Here is my solution:
$('.navbar-toggle').on('click', function() {
$(this).toggleClass('mobile-close');
})
Hide default icon bars:
.mobile-close span {
display: none !important;
}
Then you can style mobile-close something like:
.navbar-toggle.mobile-close {
cursor: pointer;
width: 42px;
height: 32px;
line-height: 40px;
}
.navbar-toggle.mobile-close:before {
content: "×";
font-size: 40px;
color: #231f20;
}
This one working just fine for bootstrap collapse:
<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>
This is the HTML code I using:
<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>
The complete code for collapse multiple div with icons in 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>
