Bootstrap Collapse conflict when expand one more item - css

Question

I have made a section with bootstrap. With in this section i added two div for adding bootstrap Collapse there first one is working good but second one doesn't work. In second div it only open content but does not Collapse
https://dl.dropboxusercontent.com/u/188550847/problem/index.html

Answer 1

DEMO single and DEMO full
You have to set different ids and data-parent for each accordion.
change
<div class="panel-group" id="accordion">
to
<div class="panel-group" id="accordion-1">
and
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
to
<a data-toggle="collapse" data-parent="#accordion-1" href="#collapseTwo">
Hier is the full code:
<div class="container">
<div class="row">
<div class="section-title item_bottom text-center" style="opacity: 1; bottom: 0px;">
<div>
<span class="fa fa-cogs fa-2x"></span>
</div>
<h1 class="white">Why<span>Us?</span></h1>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<h2 class="faqh">Our Strength</h2>
<!-- Nav tabs -->
<div class="panel-group" id="accordion-1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-1" href="#collapseOne" class="">
About Costing
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<ul>
<li>No capital expense </li>
<li>No operations cost</li>
<li>Up to 60% cost savings when compared to current offshore costs</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-1" href="#collapseTwo" class="">
How we operate?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<ul>
<li>Robust process. </li>
<li>Flexible model</li>
<li>Transparent operations</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-1" href="#collapseThree" class="">
Team work
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<ul>
<li>Work single project at a time</li>
<li>Availability of resources with skills hard to find locally</li>
<li>Low employee attrition.</li>
<li>Employees with previous experience in working directly <br/> with international (UK, US & EU) clients</li>
<li>Complete management control over your dedicated resources. </li>
<li>Our engagement model allows you to treat and manage your <br/>resources as your own employees</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-1" href="#collapsefour" class="collapsed">
Quality Assurance
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>As client has direct control over output or result of candidate, <br/> quality will be maintained as per standards at client end.</li>
<li>As quality people in terms of experience and skills are involved <br/>quality can be better controlled as per requirements</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-1" href="#collapsefive" class="collapsed">
Messages
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>All outsourcing deals will be strictly confidential and not disclosed to any media.</li>
<li>NDA is signed.</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-1" href="#collapsesix" class="collapsed">
Anything More?
</a>
</h4>
</div>
<div id="collapsesix" class="panel-collapse collapse">
<div class="panel-body">
<li>Candidate is dedicated for single client and so can give 100% time and <br/>attention to a client company. This avoids delays in the work output.</li>
<li>Easy agreement process and terms. </li>
<li>Free from legal issues.</li>
<li>We provide pilot program of 2 months before large duration contract.</li>
</div>
</div>
</div>
</div>
</div>
<!-- Accordion 2 -->
<div class="col-lg-6 col-md-6 col-sm-12">
<h2 class="faqh">Question about us</h2>
<div class="panel-group" id="accordion-2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#one" class="collapsed">
Why I need to
</a>
</h4>
</div>
<div id="one" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<ul>
<li>Cost benefits.</li>
<li>You can concentrate more on to increase customer base or other core business process.
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#Two" class="">
How much needed
</a>
</h4>
</div>
<div id="Two" class="panel-collapse in" style="height: auto;">
<div class="panel-body">
<ul>
<li>You can hire candidate for minimum of 4 months. But pilot program can be run for 1 month.</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#Three" class="">
Is our service cost effective and qualified?
</a>
</h4>
</div>
<div id="Three" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<ul>
<li>1. Yes! Our service is about 40% less costly compared to existing outsourcing service providers. You can hire 3 years experience person in general skills at an average cost of USD 1800$ per month.</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#four">
Is there project manager for each project?
</a>
</h4>
</div>
<div id="four" class="panel-collapse in" style="height: auto;">
<div class="panel-body">
<ul>
<li>o For each outsourcing project where more than 3 resources are working, we provide dedicated project manager at free of cost. He will be in contact with client as well as have responsibility of managing entire project. </li>
<li>This project manager cost will be bearded by Nimetler Technologies.In all other cases, Nimetler in house project manager will. </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#five">
How you work effectively with clients?
</a>
</h4>
</div>
<div id="five" class="panel-collapse in" style="height: auto;">
<div class="panel-body">
<ul>
<li>A dedicated or shared project manager to manage work of candidates.</li>
<li>Use of cost-effective communication tools.</li>
<li>Easy-to-use project management tools for instant access to the status of your project.</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#six">
Anything More?
</a>
</h4>
</div>
<div id="six" class="panel-collapse collapse">
<div class="panel-body">
<h3>If candidate not found result oriented during job what action will be taken?</h3>
<ul>
<li>If client is not satisfied with any candidates’ work he will be immediately replaced with alternate candidate. </li>
<li>Nimetler will not charge client on the day complaint is officially registered in given format. Also candidate will be asked to stop work.</li>
<li>In the case client can’t stop work due to certain reason, but complaint has been registered, Nimetler will charge 50% of amount negotiated till new candidate is recruited. </li>
</ul>
<hr/>
<h3>What precaution you take to tackle such situations?</h3>
<ul>
<li>During interview process we select at least 2 candidates. Out of it second person is backup resource. So work will not get affected. </li>
</ul>
<hr/>
<h3>Who manages candidates?</h3>
<ul>
<li>As all candidates are our employees, it is our responsibility to manage them. Client need to just provide assignment and check work done. </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>