html - Getting issue using accordion in navbar -

i have created accordion plus , minus shown below image.

but clicking first accordion other accordion div jumbling , getting unwanted space shown below image.

reference link(check below link sample code of problem): bootsnipp.com/nageswar/snippets/e3rbd

my code:

body {   font-family: 'open sans'; } #accordion-first .accordion-group {   margin-bottom: 10px; } #accordion-first .accordion-heading, #accordion-first .accordion-toggle:hover, #accordion-first .accordion-heading .accordion-toggle.active {   background: none repeat scroll 0% 0% transparent; } #accordion-first .accordion-heading {   border-bottom: 0px none;   font-size: 16px; } #accordion-first .accordion-heading .accordion-toggle {   display: block;   cursor: pointer;   padding: 5px 0px !important;   color: #222;   outline: medium none !important;   text-decoration: none; } #accordion-first .accordion-heading .accordion-toggle.active em {   background-color: #f7c221; } #accordion-first .accordion-heading .accordion-toggle > em {   background-color: #222;   border-radius: 100px;   color: #fff;   font-size: 14px;   height: 32px;   line-height: 32px;   margin-right: 10px;   text-align: center;   width: 32px; } 

html:

<ul class="dropdown-menu mega-dropdown-menu" style="overflow-y: scroll; padding: 1% 4%; overflow-x: hidden; display: none; opacity: 1;">   <li class="col-sm-8">     <ul>       <li class="dropdown-header" style="color: #323232;font-weight:bold;padding-left:15px;">services</li>       <li class="col-sm-12">         <div id="accordion-first accordion-custom" class="clearfix">           <div class="accordion" id="accordion2">             <div class="accordion-group col-sm-4">               <div class="accordion-heading">                 <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseone" aria-expanded="false">                   <em class="icon-fixed-width fa fa-plus" href="#collapseone"></em>                 </a>                 <a href="http://www.google.com">                   <i class="fa fa-gears service-menu-icon"></i>                 </a>               </div>               <div style="height: 0px;" id="collapseone" class="accordion-body collapse" aria-expanded="false">                 <div class="accordion-inner">                   <ul>                     <li class="dropdown-header">software development services</li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-software-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> software application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-web-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> web application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-mobile-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> mobile application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-saas-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> saas application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-software-testing-quality-assurance-qa-service.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> software testing quality assurance</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-cloud-computing-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> cloud computing application development</a></li>                     <li class="dropdown-header">it solution platforms</li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-android-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> android application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-azure-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> azure application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/c-plus-plus-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> c/c++ application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/html5-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> html5 application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-ios-ipad-iphone-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> ios application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-java-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> java application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-linux-unix-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> linux/unix software development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-dot-net-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> .net application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-php-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> php application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-python-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> python application development</a></li>                     <li><a href="http://www.example.net/it-outsourcing-services/outsource-ruby-on-rails-ror-web-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> ruby on rails application development</a></li>                   </ul>                 </div>               </div>               <br style="clear:both">             </div>             <div class="accordion-group col-sm-4">               <div class="accordion-heading">                 <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapsetwo" aria-expanded="false">                   <em class="icon-fixed-width fa fa-plus"></em>                 </a>                 <a href=""><i class="fa fa-gears service-menu-icon"></i></a>               </div>               <div style="height: 0px;" id="collapsetwo" class="accordion-body collapse" aria-expanded="false">                 <div class="accordion-inner">                   <ul>                     <li>                       <a href="http://www.example.net/finance-accounting-bpo/outsource-accounts-payable-services.php"> <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> accounts payable</a>                     </li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-accounts-receivable-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> accounts receivable</a></li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-bookkeeping-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> accounting , bookkeeping</a></li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-financial-analysis-reporting-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> financial analysis reporting</a></li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-cfo-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> cfo services</a></li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-insurance-claims-processing-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> insurance claims processing</a></li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-mortgage-process-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> mortgage process services</a></li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-payroll-processing-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> payroll processing services</a></li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-tax-preparation-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> tax preparation services</a></li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-real-estate-title-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> real estate title services</a></li>                     <li><a href="http://www.example.net/finance-accounting-bpo/outsource-record-to-report-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> record report services</a></li>                   </ul>                 </div>               </div>               <br style="clear:both">             </div>             <div class="accordion-group col-sm-4">               <div class="accordion-heading">                 <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapsethree" aria-expanded="false">                   <em class="icon-fixed-width fa fa-plus"></em>                 </a>                 <a href=""><i class="fa fa-file-text service-menu-icon"></i></a>               </div>               <div style="height: 0px;" id="collapsethree" class="accordion-body collapse" aria-expanded="false">                 <div class="accordion-inner">                   <ul>                     <li><a href="http://www.example.net/outsource-data-entry-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> data entry</a></li>                     <li><a href="http://www.example.net/data-entry/outsource-data-processing-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> data processing</a></li>                     <li><a href="http://www.example.net/data-entry/outsource-data-conversion-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> data conversion</a></li>                     <li><a href="http://www.example.net/data-entry/outsource-ocr-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> ocr</a></li>                     <li><a href="http://www.example.net/data-entry/outsource-data-cleansing-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> data cleansing</a></li>                     <li><a href="http://www.example.net/data-entry/outsource-database-development-migration-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> database management</a></li>                     <li><a href="http://www.example.net/outsource-catalog-management-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> catalog management</a></li>                     <li><a href="http://www.example.net/outsource-data-management-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> data management</a></li>                     <li><a href="http://www.example.net/outsource-research-data-mining-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> data mining</a></li>                   </ul>                 </div>               </div>               <br style="clear:both">             </div>             <div class="accordion-group col-sm-4">               <div class="accordion-heading">                 <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapsefour" aria-expanded="false">                   <em class="icon-fixed-width fa fa-plus"></em>                 </a>                 <a href=""><i class="fa fa-phone service-menu-icon"></i></a>               </div>               <div style="height: 0px;" id="collapsefour" class="accordion-body collapse" aria-expanded="false">                 <div class="accordion-inner">                   <ul>                     <li class="dropdown-header">by industry</li>                     <li><a href="http://www.example.net/call-center-outsourcing/banking-financial-services-insurance-bfsi-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> bfsi</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/energy-utilities-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> energy , utilities</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/government-agencies-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> government agencies</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/healthcare-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> medical , healthcare</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/automotive-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> automotive</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/logistics-transportation-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> logistics, supply chain , transportation</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/manufacturing-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> manufacturing</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/real-estate-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> real estate</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/retail-ecommerce-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> retail , ecommerce</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/telecom-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> telecom</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/media-entertainment-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> media , entertainment</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/travel-leisure-hospitality-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> travel, leisure , hospitality</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/education-institutions-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> education institutions</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/chemical-pharmaceutical-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> chemical pharmaceutical</a></li>                     <li class="dropdown-header">by services</li>                     <li><a href="http://www.example.net/call-center-outsourcing/outsource-inbound-outbound-sales-customer-acquisition-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> sales , customer acquisition</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/outsource-customer-care-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> customer care</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/outsource-debt-collection-recovery-call-center-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> debt collection</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/outsource-technical-support-helpdesk-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> technical support / helpdesk services</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/outsource-call-center-support-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> call center support</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/outsource-multi-channel-call-center-support-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> multi-channel support</a></li>                     <li><a href="http://www.example.net/call-center-outsourcing/call-center-technology.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> best-in-class technology</a></li>                   </ul>                 </div>               </div>               <br style="clear:both">             </div>             <div class="accordion-group col-sm-4">               <div class="accordion-heading">                 <a class="accordion-toggle collapsed" href="http://www.example.net/outsource-ecommerce-support-services.php">                   <em class="icon-fixed-width fa fa-plus"></em>                 </a>                 <a href=""><i class="fa fa-gears service-menu-icon"></i></a>               </div>               <div style="height: 0px;" id="collapsefive" class="accordion-body collapse">                 <div class="accordion-inner">                 </div>               </div>               <br style="clear:both">             </div>             <div class="accordion-group col-sm-4">               <div class="accordion-heading">                 <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapsesix" aria-expanded="false">                   <em class="icon-fixed-width fa fa-plus"></em>                 </a>                 <a href=""><i class="fa fa-gears service-menu-icon"></i></a>               </div>               <div style="height: 0px;" id="collapsesix" class="accordion-body collapse" aria-expanded="false">                 <div class="accordion-inner">                 </div>               </div>               <br style="clear:both">             </div>             <div class="accordion-group col-sm-4">               <div class="accordion-heading">                 <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseseven" aria-expanded="false">                   <em class="icon-fixed-width fa fa-plus"></em>                 </a>                 <a href=""><i class="fa fa-gears service-menu-icon"></i></a>               </div>               <div style="height: 0px;" id="collapseseven" class="accordion-body collapse" aria-expanded="false">                 <div class="accordion-inner">                 </div>               </div>               <br style="clear:both">             </div>             <div class="accordion-group col-sm-4">               <div class="accordion-heading">                 <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseeight" aria-expanded="false">                   <em class="icon-fixed-width fa fa-plus"></em>                 </a>                 <a href=""><i class="fa fa-gears service-menu-icon"></i></a>               </div>               <div style="height: 0px;" id="collapseeight" class="accordion-body collapse" aria-expanded="false">                 <div class="accordion-inner">                 </div>               </div>               <br style="clear:both">             </div>             <br style="clear:both">           </div>           <!-- end accordion -->           <br style="clear:both">         </div>         <br style="clear:both">       </li>     </ul>   </li>   <li class="col-sm-4">     <ul>       <li class="dropdown-header" style="color: #323232;font-weight:bold;">perspectives on services</li>       <li><img width="300" height="200" title=" download customer care case study , read how australian based manufacturing company increased sales , customer satisfaction after handling customer care call center services invensis." alt="invensis, leading services company, offers customer care call center services clients globally. download case study , read how australia based manufacturing company increased sales , customer satisfaction."         src="http://www.example.net/assets/img/customer-care-call-center-outsourcing-services-indddvensis-technologies.png"></li>     </ul>   </li> </ul> 

jquery:

(function($) {   "use strict"    // accordion toggle items   var iconopen = 'fa fa-minus',     iconclose = 'fa fa-plus';    $(document).on('show.bs.collapse hide.bs.collapse', '.accordion', function(e) {     var $target = $(e.target)     $target.siblings('.accordion-heading')       .find('em').toggleclass(iconopen + ' ' + iconclose);     if (e.type == 'show')       $target.prev('.accordion-heading').find('.accordion-toggle').addclass('active');     if (e.type == 'hide')       $(this).find('.accordion-toggle').not($target).removeclass('active');   });  })(jquery);