I am newbie and I am using Bootstrap my accordion is working fine but I need to the color of the icon to white on click…
and also I need to use my custom icons for this how I can place that…
your early reply would be appreciated.
here is the code:
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e113"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: black; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
}
.accordion-toggle:hover {
text-decoration: none;
}
</style>
<style>
#accordion .highlight {
background:green;
transition:background 2s ease;
}
</style>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading highlight">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <i class="indicator glyphicon glyphicon-minus"></i> 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" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <i class="indicator glyphicon glyphicon-plus"></i> 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" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <i class="indicator glyphicon glyphicon-plus"></i> 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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('glyphicon-minus glyphicon-plus');
//$('#accordion .panel-heading').css('background-color', 'green');
$('#accordion .panel-heading').removeClass('highlight');
$(e.target).prev('.panel-heading').addClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</script>
</body>
</html>
You can change the colour of the plus icon and dropdown arrow by using the highlight class.
.panel-heading.highlight .accordion-toggle:after{color:#fff}/* arrow*/
.panel-heading.highlight .accordion-toggle .indicator{color:#fff}/* plus minus*/
The icons are supplied by the glyphicons font so you don’t really want to start changing them as that defeats the purpose of using that library of icons. If you really want your own icons then you will need to upload your own images and use them instead of the glyphicon fonts.
This means writing your own css to hide and show the image that you want. It’s not difficult but you need to be familiar with css. You would then again use the highlight class to change the image depending on whether its open or closed. As you are a beginner I would suggest you stay with the standard icon until you gain a little more experience.
On another issue if you want the highlighted item to switch back to gray from green then change the js at the bottom to this:
As I am here now custom icons and made the CSS and it reflecting in my accordion properly and jquery working fine but the problem is here for each icon I am making a separate functions, I need a single function which works for my all icons. (I am just adding only 2 icons in this post).
sprite icons which I am using here…
html:
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
#accordion .highlight {
background:#F6860C;
color:#fff;
}
.nav-icon-products{
background:url(../img/Icon_settings_Navset2.png) no-repeat 0 0;
width:18px;
height:15px;
position:relative;
top:0px;
display:inline-block;
}
.nav-icon-products.finance-grey{
background-position:0px 0px;
}
.nav-icon-products.finance-white{
background-position:0px -20px;
}
.nav-icon-products.forex-grey{
background-position:-15px -2px;
}
.nav-icon-products.forex-white{
background-position:-15px -21px;
}
.nav-icon-products.hr-grey{
background-position:-50px -0px;
}
.nav-icon-products.hr-white{
background-position:-50px -18px;
}
</style>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading panel-heading_ highlight">
<h4 class="panel-title">
<a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<i class="indicator nav-icon-products finance-white"></i>
Finance
<i class="indicator1 glyphicon glyphicon-chevron-up pull-right"></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>
<div class="panel panel-default">
<div class="panel-heading panel-heading_">
<h4 class="panel-title">
<a class="accordion-toggle panel-title_" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<i class="indicator2 nav-icon-products forex-grey"></i>
Forex
<i class="indicator1 glyphicon glyphicon-chevron-down pull-right"></i>
</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" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <i class="indicator glyphicon glyphicon-plus"></i> 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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('finance-white finance-grey');
$('#accordion .panel-heading').removeClass('highlight');
$(e.target).prev('.panel-heading').addClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
function toggleChevron2(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator2')
.toggleClass('forex-grey forex-white');
$('#accordion .panel-heading').removeClass('highlight');
$(e.target).prev('.panel-heading').addClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron2);
$('#accordion').on('shown.bs.collapse', toggleChevron2);
function toggleChevron1(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator1')
.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron1);
$('#accordion').on('shown.bs.collapse', toggleChevron1);
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.panel-heading').click(function(){
$('.panel-heading').removeClass('highlight');
$(this).addClass('highlight');
})
})
</script>
</body>
</html>
