I have some html and i am willing to change the font colour of h4 tag by keydown or keyup
example;
when i keydown id="txt1",id="txt2"the font colour change to be green
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
similarly for all panel how i can do this? thanks
<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">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<section>
<div class="section_inner">
<input type="text" name="txt1" id="txt1"/>
<input type="text" name="txt2" id="txt2"/>
</div>
</section>
</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">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<section>
<div class="section_inner">
<input type="text" name="txt3"/>
<input type="text" name="txt4"/>
<input type="text" name="txt5"/>
<input type="text" name="txt6"/>
</div>
</section>
</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">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<section>
<div class="section_inner">
<input type="text" name="txt7"/>
<input type="text" name="txt8"/>
<input type="text" name="txt9"/>
<input type="text" name="txt10"/>
</div>
</section>
</div>
</div>
</div>
</div>
<script>
var collapseOne = 0;
//collapseOne reqeried validation
$('#collapseOne input[type=text]').keyup(function(){
$('#collapseOne input[type=text]').each(function(){
if ( $(this).hasClass('required') ){
if ( $(this).val() != '' ){
collapseOne = 1;
}
}
});
if ( collapseOne == 1 ){
//$(this).find("data-id='collapseOne'").css("color","green");
//$(this).closest('.panel-heading h4').css("color","green");
}
});
</script>
If you want to change color of h4 then try this
$( "body" ).keydown(function() {
$("h4").css("color","green");
});
try this:
$("body").keypress(function( event ) {
if ( event.which == 40 || event.which == 38 ) {
$("h4").find("a").css("color","green");
}
});
or
$("body").keypress(function( event ) {
if ( event.which == 40 || event.which == 38 ) {
$("h4 > a").css("color","green");
}
});
more info abyout keypress
I think that's what you want
$( "input" ).keydown(function(e) {
$(e.target).closest("h4").css("color","green");
});
Related
How do I access the <a ....>General</a> base on this div I'm getting below on "test"?
test
<div
role="tabpanel"
class="panel-collapse collapse"
id="collapseGeneral"
aria-labelledby="collapseGeneral"
style="height: auto"
>
<div class="panel-body">
...
</div>
</div>
GIVEN
<div class="panel panel-default">
<div role="tab" class="acc-heading" id="headingGeneral">
<a
data-toggle="collapse"
role="button"
aria-expanded="false"
data-parent="#accordion"
class=""
href="#collapseGeneral"
aria-controls="collapseGeneral"
>General</a
>
</div>
<div
role="tabpanel"
class="panel-collapse collapse"
id="collapseGeneral"
aria-labelledby="collapseGeneral"
style="height: auto"
>
<div class="panel-body">
...
</div>
</div>
</div>
code
console.log(jQuery(test).parent(), "parent");
Looks like you want to find the matching aria-controls element for your <div>
Try this
// Find the matching aria-control
const control = $(`a[aria-controls="${test.id}"]`);
// Add the "collapsed" class
control.addClass("collapsed");
You could also match it by href but it wasn't exactly clear what your selection criteria was
const control = $(`a[href="#${test.id}"]`);
Here's a runnable demo...
// You don't need to redefine `test`,
// this is just emulating the variable in your question
// to make my answer runnable.
// IGNORE THIS LINE
const test = document.querySelector("#collapseGeneral");
// Find the matching aria-control
const control = $(`a[aria-controls="${test.id}"]`);
// now do something with `control`...
control.addClass("collapsed");
.collapsed { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<!-- minified HTML -->
<div class="panel panel-default"> <div role="tab" class="acc-heading" id="headingGeneral"> <a data-toggle="collapse" role="button" aria-expanded="false" data-parent="#accordion" class="" href="#collapseGeneral" aria-controls="collapseGeneral" >General</a > </div><div role="tabpanel" class="panel-collapse collapse" id="collapseGeneral" aria-labelledby="collapseGeneral" style="height: auto" > <div class="panel-body"> ... </div></div></div>
I have 3 different forms with different amount of check boxes each section represents a form basiclly so when the use selects a checkbox in that section it shows how much they have checked out of the total amount for that section
HTML
<body class="container">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<p class="count-checked-checkboxes">Name of Section 0</p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form1" action="">
<input id="question-1" type="checkbox">
<label for="question-1">solution name</label>
<br>
<input id="description" type="checkbox">
<label for="description">solution name</label>
<br>
<input id="question-2" type="checkbox">
<label for="question-2">demo question</label>
<br>
<input id="question-3" type="checkbox">
<label for="question-3">another demo question</label>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<p class="count-checked-checkboxes">Name of Section 0</p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form id="form2" action="">
<input id="ques-1" type="checkbox">
<label for="ques-1">solution name</label>
<br>
<input id="description1" type="checkbox">
<label for="description1">solution name</label>
<br>
<input id="ques2" type="checkbox">
<label for="ques2">demo question</label>
<br>
<input id="ques3" type="checkbox">
<label for="ques3">another demo question</label>
<br>
<input id="ques11" type="checkbox">
<label for="ques11">another demo question</label>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<p class="count-checked-checkboxes">Name of Section 0</p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<form id="form3" action="">
<input id="ques4" type="checkbox">
<label for="ques4">solution name</label>
<br>
<input id="description3" type="checkbox">
<label for="description3">solution name</label>
<br>
<input id="ques5" type="checkbox">
<label for="ques5">demo question</label>
<br>
<input id="ques6" type="checkbox">
<label for="ques6">another demo question</label>
<br>
<input id="ques44" type="checkbox">
<label for="ques44">another demo question</label>
<br>
<input id="ques64" type="checkbox">
<label for="ques64">another demo question</label>
</form>
</div>
</div>
</div>
</div>
</body>
jquery
$(function(){
var e = document.forms[0];
var numQuestion;
var i;
var formName = $(this).e;
for(i = 0; i < e.length; i++){
numQuestion = e.getEle**mentsByTagName('label');
console.log(numQuestion.length);
}
$('#' + formName).closest('.panel-heading').find('.numOfQuestions').text('/' + e.length);
var $checkboxes = $('input[type="checkbox"], #form1');
$checkboxes.change(function(){
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
$(this).closest('.panel-heading').find('.count-checked-checkboxes').text('Name of Section ' + countCheckedCheckboxes);
});
});
my progress so far
Here's what I came up with that does the job. Commented for clarity, I think you can follow it to make whatever modifications that are necessary.
// --- when user changes a checkbox ---
$(document).on('change', 'input[type="checkbox"]', function(e) {
// --- get the form name ---
var $form = $(this).closest('form');
var formName = $form.attr('id');
// --- count the checkboxes for this form ---
var totalCheckboxes = $form.children('input[type="checkbox"]').length;
// --- place count value in the 'numOfQuestions' p ---
var $panel = $form.closest('.panel-default');
$panel.find('.numOfQuestions').text('/' + totalCheckboxes);
// --- count total checkboxes checked ---
var countCheckedCheckboxes = $form.children('input[type="checkbox"]:checked').length;
// --- place checked count in 'count-checked-checkboxes' p ---
$panel.find('.count-checked-checkboxes').text('Name of Section '+countCheckedCheckboxes);
});
selector is probably the issue
$(this).siblings('.panel-heading').find('.count-checked-checkboxes')
try using parent() or closest()
Add change event to each input checkbox, then inside the change event, find closest .pannel-body then find('input:checked') and get the length assign to count.
Next just update (use closest to find the .pannel) and update the text
NOTE: closest will go up find a parent, it will not find a sibling or child.
$('input[type="checkbox"]').on('change', function() {
var count = $(this).closest('.panel-body').find('input:checked').length;
$(this).closest('.panel').find('.count-checked-checkboxes').text(count);
updateTotal();
});
function updateTotal(){
var total = 0;
$('.count-checked-checkboxes').each(function(){
total += +$(this).text();
});
$('#mytotal').text(total);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="container">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>Total: <span id="mytotal"></span></div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<p>Name of Section <span class="count-checked-checkboxes">0</span></p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form1" action="">
<input id="question-1" type="checkbox">
<label for="question-1">solution name</label>
<br>
<input id="description" type="checkbox">
<label for="description">solution name</label>
<br>
<input id="question-2" type="checkbox">
<label for="question-2">demo question</label>
<br>
<input id="question-3" type="checkbox">
<label for="question-3">another demo question</label>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<p>Name of Section <span class="count-checked-checkboxes">0</span></p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form id="form2" action="">
<input id="ques-1" type="checkbox">
<label for="ques-1">solution name</label>
<br>
<input id="description1" type="checkbox">
<label for="description1">solution name</label>
<br>
<input id="ques2" type="checkbox">
<label for="ques2">demo question</label>
<br>
<input id="ques3" type="checkbox">
<label for="ques3">another demo question</label>
<br>
<input id="ques11" type="checkbox">
<label for="ques11">another demo question</label>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<p>Name of Section <span class="count-checked-checkboxes">0</span></p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<form id="form3" action="">
<input id="ques4" type="checkbox">
<label for="ques4">solution name</label>
<br>
<input id="description3" type="checkbox">
<label for="description3">solution name</label>
<br>
<input id="ques5" type="checkbox">
<label for="ques5">demo question</label>
<br>
<input id="ques6" type="checkbox">
<label for="ques6">another demo question</label>
<br>
<input id="ques44" type="checkbox">
<label for="ques44">another demo question</label>
<br>
<input id="ques64" type="checkbox">
<label for="ques64">another demo question</label>
</form>
</div>
</div>
</div>
</div>
</body>
I am trying to Add bootstrap Accordion to my project but its not working.... what is the problem with my code i have added below with JavaScript.
I am also including following files in my project.
Thanks in Advance.
Regards.
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.glyphicon-collapse-down').removeClass('.glyphicon-collapse-down')
}).on('hidden.bs.collapse', function () {
$(this).parent().find('..glyphicon-collapse-up').removeClass('.glyphicon-collapse-up').addClass('.glyphicon-collapse-down');
});
});
</script>
You can look for the previous element and find the span with a class of .glyphicon.
Then simply add or remove the up and down classes.
Here is an example.
$('.collapse')
.on('show.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-down')
.addClass('glyphicon-collapse-up')
})
.on('hide.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-up')
.addClass('glyphicon-collapse-down')
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In order to change the accordion icons I would suggest to use:
.toggleClass() in order to change icons from down to up and vice versa,
show.bs.collapse event
hide.bs.collapse event
$(document).ready(function () {
$('.collapse').on('show.bs.collapse hide.bs.collapse', function () {
$(this).closest('.panel').find('.panel-heading .glyphicon').toggleClass('glyphicon-collapse-down glyphicon-collapse-up')
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Refer to this link. http://jsfiddle.net/panchroma/3gYa3/
Bootstrap accordion using only CSS
.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 */
}
I'm developing a bootstrap accordion for my website but it's not working in dreamweaver cc and when I publish it in my browser.
Looks like it works on JSFiddle. Here is a link: JSFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#one1" aria-expanded="false" aria-controls="one1" >SHOP LIST</a>
</h4>
</div>
<div id="one1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" >
<div class="panel-body">
<table width="903" border="0">
<tbody>
<tr style="font-size: 10px">
<td width="293" align="center" valign="top" style="font-size: 10px">
<p1>HOKKAIDO<br>GRAN SAC'S 苫小牧 0144-53-5355</p1><br><br>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I've been looking for a solution for hours but still can't figure out what's wrong with my accordion.
Here is example please check where is your mistake and still you have doubt please give comment.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<div class="container">
<div class="row">
<article class="content col-sm-12 col-md-12">
<p>Some Text </p>
<br>
<div class="clearfix"></div>
<div class="filter-box accordions-filter">
<div class="panel-group filter-elements" id="accordion">
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<i class="fa fa-circle"></i> Text 1
</a>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<p>No worries. Just let us know your preferred time slot. We will call you 1 hour before to know your availability. It is possible to reschedule the call; your time is valuable to us.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<i class="fa fa-circle"></i> Text 2
</a>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>We are one call away to help you out. Your emergency is our priority.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<i class="fa fa-circle"></i>Text 3
</a>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Yes. We are working through the week. Your weekends are our peak days as we value your time :)</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
<i class="fa fa-circle"></i>Text 4
</a>
</div>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p>Any small work of around 30 mins is included in this minimum charge. It also includes an inspection and visit to your place so that Zimmber Champ will understand your requirement and will offer best available solution to suit your budget requirement. These visiting charges will be waived off, if you avail of our services. But minimum charges will be applicable in case of no show.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
<i class="fa fa-circle"></i>Text 6
</a>
</div>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
<i class="fa fa-circle"></i> Text 7
</a>
</div>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
I am using bootstrap accordion in my code. On click on every list I will display Data and Icon will change.
<i class="fa fa-plus-square"></i>
will change to
<i class="fa fa-minus-square"></i>
My code:-
<div class="priority-lists">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindDistrictMeteres">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind District Meters
</h2>
</div>
<div id="waterMindDistrictMeteres" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindPressurePoints">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind Pressure Points
</h2>
</div>
<div id="waterMindPressurePoints" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindServicePoints">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind Service Points
</h2>
</div>
<div id="waterMindServicePoints" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried to use some code:
My jsFiddle code
I will see icon are not working properly. I am looking for solution in CSS or JavaScript or jQuery.
You have to add .collapsed to your panel-headings! The first time .collapsed is not on that element, but bootstrap updated it on a click.
It does work fine by me now.
Updated fiddle
Please check on this link
Js Fiddle
You must add a class "collapsed" next to "panel-heading". your problem will be solved
You should init your icons with : fa-plus-square, not fa-minus-square.