Bootstrap Collapse conflict when expand one more item

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 &amp; 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>