I'm not sure what is wrong, since this is pretty much exactly like in the bootstrap website
Once clicked on the first element (List A), it pretty much breaks. Other elements are ok, but once list A is clicked it breaks.
<div class="accordion" id="notification_types">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#a">List A</a>
</div>
<div class="accordion-body collapse" id="a" style="height: 0px;">
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#b">List B</a>
</div>
<div class="accordion-body collapse" id="b" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a123">
<a data-method="get" data-remote="true" href="/123">123</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#c">List C</a>
</div>
<div class="accordion-body collapse" id="c" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a456">
<a data-method="get" data-remote="true" href="/456">456</a>
</div>
</div>
</div>
</div>
I've made an example in jsfiddle - http://jsfiddle.net/uycBa/157/
When testing, press List B or C before, since pressing on A will break the whole thing...
What is wrong here?
Adding div to first accordion body worked.Could not find reason for this.
<div class="accordion" id="notification_types">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#a">List A</a>
</div>
<div class="accordion-body collapse" id="a" style="height: 0px;">
<div class="accordion-inner">
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#b">List B</a>
</div>
<div class="accordion-body collapse" id="b" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a123">
<a data-method="get" data-remote="true" href="/123">123</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#c">List C</a>
</div>
<div class="accordion-body collapse" id="c" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a456">
<a data-method="get" data-remote="true" href="/456">456</a>
</div>
</div>
</div>
</div>
Known error : https://github.com/twitter/bootstrap/issues/5849
The transition is blocking the plugin because your first collapsible has no height :
The plugin is in the transitioning state, and is waiting for the transition to end, but since the height of the element is 0, the transition never started and will not end (I think so). The plugin doesn't do anything when it's in this state.
You can see it if you deactivate the transition : http://jsfiddle.net/Sherbrow/uycBa/158/
You could stop this by calling preventDefault() on the show event :
$('.accordion-body.empty').on('show', function(event) {
event.preventDefault();
});
(empty is also added in the markup to locate the empty accordion body)
Demo : http://jsfiddle.net/Sherbrow/uycBa/159/
Related
I have one accordion where all items have another nested accordion. I'm trying to open the first level of accordions by clicking on the button, without opening nested accordions.
I would like to open all "Groups"-accordions and keep sub-accordions "Count 1" and "Count 2" closed.
How can I do that?
$(document).ready(function() {
// Collapse inner groups:
$('#p-lists').on('hide', function(e) {
// Force a collapse (.hide() doesn't seem to work properly here but is unnecessary anyway):
$(e.target).find('.accordion-body')
.removeClass('in')
.attr('style', '');
});
// Make sure parent groups are also opened:
$('#p-lists').on('show', function(e) {
var $parent = $(e.target).parents('.accordion-body');
// Collapse all siblings:
$parent.parents('.accordion-group')
.prevAll('.accordion-group').find('.accordion-body').collapse('hide')
.nextAll('.accordion-group').find('.accordion-body').collapse('hide');
// Then open THIS parent:
$parent.collapse('show');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<h3>Accordion test</h3>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#p-counts-2">Open counts 2</button>
<div class="accordion" id="p-lists">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-1">
<h5>Group 1</h5>
</a>
</div>
<div id="p-lists-1" class="accordion-body collapse">
<div class="accordion-inner">Body p1</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-2">
<h5>Group 2</h5>
</a>
</div>
<div id="p-lists-2" class="accordion-body collapse">
<div class="accordion-inner">
<h4>Inner accordion</h4>
<!-- Start of inner -->
<div class="accordion" id="p-counts">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-1">
<h5>Counts 1</h5>
</a>
</div>
<div id="p-counts-1" class="accordion-body collapse">
<div class="accordion-inner">Counts p1</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-2">
<h5>Counts 2</h5>
</a>
</div>
<div id="p-counts-2" class="accordion-body collapse">
<div class="accordion-inner">Counts p2</div>
</div>
</div>
</div>
<!-- end of inner -->
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-3">
<h5>Group 3</h5>
</a>
</div>
<div id="p-lists-3" class="accordion-body collapse">
<div class="accordion-inner">Body p3</div>
</div>
</div>
</div>
View on jsFiddle
So,
on your button click, we check if any of the sub-accordions have been opened, if yes, we close them;
on the normal accordion panel click, we wouldn't intentionally close the sub-accordions;
Snippet below:
$(document).ready(function() {
$('#myBtn').click(function() {
($('#group1').hasClass('collapsed')) ? $("a#group1").trigger('click'): '';
($('#group2').hasClass('collapsed')) ? $("a#group2").trigger('click'): '';
($('#group3').hasClass('collapsed')) ? $("a#group3").trigger('click'): '';
$("a.accordion-toggle-inner:not('.collapsed')").each(function() {
$(this).trigger('click');
});
});
});
#group1,
#group2,
#group3 {
color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container">
<button id='myBtn' type="button" class="btn btn-warning" data-toggle="collapse"> open the first level of
accordions by clicking on the button, without opening nested accordions</button>
<div class="accordion">
<a class="accordion-toggle collapsed" data-toggle="collapse" id='group1' href="#p-lists-1">
<h5>Group 1</h5>
</a>
<div id="p-lists-1" class="accordion-body collapse">
Body p1
</div>
<div class="accordion-group">
<a id='group2' class="accordion-toggle collapsed" data-toggle="collapse" href="#p-lists-2">
<h5>Group 2</h5>
</a>
<div id="p-lists-2" class="accordion-body collapse">
<div class="accordion-inner">
<h4>Inner accordion</h4>
<!-- Start of inner -->
<div class="accordion" id="p-counts">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed accordion-toggle-inner" data-toggle="collapse" href="#p-counts-1">
<h5>Counts 1</h5>
</a>
</div>
<div id="p-counts-1" class="accordion-body collapse">
<div class="accordion-inner">Counts p1</div>
</div>
</div>
<a class="accordion-toggle collapsed accordion-toggle-inner" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-2">
<h5>Counts 2</h5>
</a>
<div id="p-counts-2" class="accordion-body collapse">
Counts p2
</div>
</div>
<!-- end of inner -->
</div>
</div>
</div>
<a class="accordion-toggle collapsed" data-toggle="collapse" id='group3' href="#p-lists-3">
<h5>Group 3</h5>
</a>
<div id="p-lists-3" class="accordion-body collapse"> Body p3</div>
</div>
UPDATE: in light of questioner's comment above
I need to be able to get access to an element that will be available via AJAX after several click events. I cannot simply use $(element).on('click', selector, event) because the element I need access to is not a child element.
For example, what appears on initial page load is this:
<ol class="opc" id="checkoutSteps">
<li id="opc-billing" class="section opc-step"
data-step-number="0">
<div class="step-title" data-href="#step-1">
<span class="number">1</span>
<h2>Billing Information</h2>
<a onclick="stepTo('#step-2'); return false;"
href="#step-2">
View </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="billing-step-login" class="step a-item">
<div id="step-2"
class="panel-collapse collapse in">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-shipping" class="section opc-step"
data-step-number="1">
<div class="step-title" data-href="#step-2">
<span class="number">2</span>
<h2>Shipping Information</h2>
<a onclick="stepTo('#step-3'); return false;"
href="#step-3">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping-step-login" class="step a-item">
<div id="step-3"
class="panel-collapse collapse ">
<div class="panel-body">
<button class="button btn-next" type="submit"><span><span>Continue</span></span></button>
</div>
</div>
</div>
</li>
<li id="opc-shipping_method" class="section opc-step"
data-step-number="2">
<div class="step-title" data-href="#step-3">
<span class="number">3</span>
<h2>Shipping Method</h2>
<a onclick="stepTo('#step-4'); return false;"
href="#step-4">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping_method-step-login" class="step a-item">
<div id="step-4"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-payment" class="section opc-step"
data-step-number="3">
<div class="step-title" data-href="#step-4">
<span class="number">4</span>
<h2>Payment Method</h2>
<a onclick="stepTo('#step-5'); return false;"
href="#step-5">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="payment-step-login" class="step a-item">
<div id="step-5"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-review" class="section">
<div class="step-title" data-href="#step-6">
<span class="number">5</span>
<h2>Order Review</h2>
Edit
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="review-step-login" class="step a-item">
<div id="step-6" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</li>
</ol>
Once I click the button inside div.#step-3, some content with a button loads in div.#step-4. After clicking the button in that div, a button loads in #step-5. Finally, after clicking on the button inside #step-5, there is content (textarea and another button) loaded in #step-6 that I'm interested in.
How do I go about writing a jQuery or JavaScript event that would allow me to get access to the div.#step-6 textarea? Can I write several nested $(element).on() events?
P.S. I don't have access to change any of the existing HTML, CSS, or JavaScript files. I can only write new JavaScript.
It seems that you can bind the delegated event to a common static ancestor.
For example, #checkOutSteps:
jQuery('#checkOutSteps').on('focus','div.#step-6 textarea',function(){
...
});
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. --Event Delegation
https://fiddle.jshell.net/8v72rtxb/
I have the following code.
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#studies-collapse" aria-expanded="false" aria-controls="collapseExample">
Studies
</a>
<div class="collapse" id="studies-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#research-collapse" aria-expanded="false" aria-controls="collapseExample">
Research
</a>
<div class="collapse" id="research-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>
I have no idea why data-parent doesn't work though. Expand one collapse div doesn't close the other collapse. I tried to copy the code from the example of bootstrap, but it still doesn't work.
Also in my project, I include jquery.js before bootstrap.min.js. I have checked some other questions, they said that bootstrap.min.js might have been included twice. But should that be the case?
Thanks for reading!
I figured a workaround for this. Even without using the data-parent attribute.
https://fiddle.jshell.net/zyd1vL4o/
$(document).ready(function(){
$('.collapse').on('show.bs.collapse', function (e) {
$('.collapse').collapse("hide")
})
})
Once go through this jsfiddle
And here is html code,
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Studies
</a>
</h5>
</div>
<div id="collapseOne" class="collapse " role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div id="studies-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Research
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div id="research-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use:
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed" data-target="#studies-collapse" href="#studies-collapse" aria-expanded="false" aria-controls="studies-collapse">
Studies
</a>
<div class="collapse" id="studies-collapse" data-parent="#menu">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed" data-target="#research-collapse" href="#research-collapse" aria-expanded="false" aria-controls="research-collapse">
Research
</a>
<div class="collapse" id="research-collapse" data-parent="#menu">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>
import 'bootstrap/js/dist/collapse';
Include this in your file and the collapse should work.
If its not closing, then you might not be properly linking to to your bootstrap js. You shouldn't need to add anything extra.
check for the following js files:
bootstrap.min.js
bootstrap.bundle.min.js
If you're creating a bootstrap theme then in the functions do this:
wp_register_script( 'write your theme name here', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
I have an accordion. It's given in the below fiddle.
http://fiddle.jshell.net/7vRV9/
In this case when I click an element group one it will open, after that click element group 2. It also will open. But my requirement is when one is opened, all others should close, if I have several (now only two is there). How to implemement this one?
I hope this will work for you. Just replace below HTML snippet with your JSFIDDLE HTML. It will start work. Feel free to ask if you have any doubt.
<div class="accordion" id="food-category">
<div class="accordion-group">
<div class="accordion-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#indian">Indian Food</div>
</div>
<div class="accordion-body collapse" id="indian">
<ul>
<li> Food 1</li>
<li> Food 2</li>
<li> Food 3</li>
</ul>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#sea">Sea Food</div>
</div>
<div class="accordion-body collapse" id="sea">
<ul>
<li> Food 1</li>
<li> Food 2</li>
<li> Food 3</li>
</ul>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#chinese">chinese Food</div>
</div>
<div class="accordion-body collapse" id="chinese">
<ul>
<li> Food 1</li>
<li> Food 2</li>
<li> Food 3</li>
</ul>
</div>
</div>
</div>
I have modified your code and made below changes :-
Might be id="accordion1" is creating some issue so I renamed this id with customTab and replaced respectively
Added < div class="accordion-group"> for better UI
Please test it. If you need further help please update me.
Also you can copy and paste below snippet in JSfiddle and test it :-
<div class="accordion " id="customTab">
<div class="accordion-group">
<!-- Element Group Heading -->
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse1">
<b>Element Group 1</b>
</a>
</div>
<!-- Elements -->
<div id="collapse1" class="accordion-body collapse">
<!-- -->
<div class="accordion" id="accordion1-1">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1-1" data-target="#collapseOne1-1">
<input type="radio" name="optionsCheckboxList" value="1"/>Element One
</label>
</div>
<div id="collapseOne1-1" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
</div></div>
</div>
<!-- -->
<div class="accordion" id="accordion1-2">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1-2" data-target="#collapseOne1-2">
<input type="radio" name="optionsCheckboxList" value="2"/>Element Two
</label>
</div>
<div id="collapseOne1-2" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
</div></div>
</div>
<!-- -->
</div>
</div>
<div class="accordion-group">
<!-- Element Group Heading -->
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse2">
<b>Element Group 2</b>
</a>
</div>
<!-- Elements -->
<div id="collapse2" class="accordion-body collapse">
<!-- -->
<div class="accordion" id="accordion2-1">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2-1" data-target="#collapseOne2-1">
<input type="radio" name="optionsCheckboxList" value="1"/>Element One
</label>
</div>
<div id="collapseOne2-1" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
</div></div>
</div>
<!-- -->
<div class="accordion" id="accordion2-2">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2-2" data-target="#collapseOne2-2">
<input type="radio" name="optionsCheckboxList" value="2"/>Element Two
</label>
</div>
<div id="collapseOne2-2" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
</div></div>
</div>
<!-- -->
</div>
</div>
</div>
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>