html - How to put these two accordion inline in bootstrap? -

i walking through example bootstrap:

<div class="accordion" id="accordion2">   <div class="accordion-group">     <div class="accordion-heading">       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseone">         collapsible group item #1       </a>     </div>     <div id="collapseone" class="accordion-body collapse in">       <div class="accordion-inner">         anim pariatur cliche...       </div>     </div>   </div>   <div class="accordion-group">     <div class="accordion-heading">       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsetwo">         collapsible group item #2       </a>     </div>     <div id="collapsetwo" class="accordion-body collapse">       <div class="accordion-inner">         anim pariatur cliche...       </div>     </div>   </div> </div> 

now output looks this:

collpasible item 1# collpasible item 1# 

but want output looks like:

    collpasible item 1#  collpasible item 2#     occupy reusult of item 1 if 1 clicked   collpasible item 1#  collpasible item 2#     occupy reusult of item 2 if 2 clicked 

adding simple inline didn't work.

you want using tabs (or pills), not accordion. don't forget add js file needed. more: http://twitter.github.io/bootstrap/javascript.html#tabs , http://twitter.github.io/bootstrap/components.html#navs

from docs:

<ul class="nav nav-tabs" id="mytab">   <li class="active"><a href="#home">home</a></li>   <li><a href="#profile">profile</a></li> </ul>  <div class="tab-content">   <div class="tab-pane active" id="home">...</div>   <div class="tab-pane" id="profile">...</div> </div>