Collapses & Tabs

<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-ar">
<li class="active"><a href="#home3" data-toggle="tab"><i class="fa fa-star"></i></a></li>
<li><a href="#profile3" data-toggle="tab"><i class="fa fa-folder-open"></i></a></li>
<li><a href="#messages3" data-toggle="tab"><i class="fa fa-tags"></i></a></li>
<li><a href="#settings3" data-toggle="tab"><i class="fa fa-clock-o"></i></a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, consequuntur error ad sint accusantium molestias recusandae esse culpa doloremque labore fuga officia.</div>
<div class="tab-pane" id="profile3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, at, laboriosam, possimus, nam rem quia reiciendis sit vel totam id eum quasi aperiam officiis omnis ipsum quo praesentium.</div>
<div class="tab-pane" id="messages3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ipsam, distinctio, ea quas quam mollitia enim dolorem aliquam laboriosam exercitationem ullam iste quis possimus aut atque.</div>
<div class="tab-pane" id="settings3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis, ea quam minus aliquid libero quibusdam eos incidunt quo accusantium itaque veritatis reprehenderit optio.</div>
</div>
                            

<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-ar nav-tabs-ar-white">
<li class="active"><a href="#home2" data-toggle="tab">Home</a></li>
<li><a href="#profile2" data-toggle="tab">Profile</a></li>
<li><a href="#messages2" data-toggle="tab">Messages</a></li>
<li><a href="#settings2" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, consequuntur error ad sint accusantium molestias recusandae esse culpa doloremque labore fuga officia perspiciatis beatae mollitia earum voluptatibus numquam inventore dolorem ipsa modi molestiae porro illum pariatur nisi eligendi laudantium architecto rerum deserunt distinctio repellendus sit quod nemo obcaecati laboriosam quibusdam.</div>
<div class="tab-pane" id="profile2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, at, laboriosam, possimus, nam rem quia reiciendis sit vel totam id eum quasi aperiam officiis omnis ipsum quo praesentium quaerat unde mollitia maiores. Dignissimos, deleniti, eos, quibusdam quae voluptatibus obcaecati voluptatum iure quas voluptates cupiditate incidunt voluptate dolorem delectus exercitationem earum?</div>
<div class="tab-pane" id="messages2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ipsam, distinctio, ea quas quam mollitia enim dolorem aliquam laboriosam exercitationem ullam iste quis possimus aut atque est beatae temporibus impedit deleniti explicabo ratione esse molestias maiores minima odit? Tempore, omnis, possimus praesentium minus iusto laboriosam vitae officiis deserunt voluptate odio.</div>
<div class="tab-pane" id="settings2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis, ea quam minus aliquid libero quibusdam eos incidunt quo accusantium itaque veritatis reprehenderit optio provident nostrum ipsam aliquam voluptate officia voluptatem magni vitae nisi error maiores dolor natus at perferendis. Eligendi, a deserunt voluptatibus facere dolores rem molestias ad magnam!</div>
</div>
                            

<h3>Square Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home4" data-toggle="tab">Home</a></li>
<li><a href="#profile4" data-toggle="tab">Profile</a></li>
<li><a href="#messages4" data-toggle="tab">Messages</a></li>
<li><a href="#settings4" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, consequuntur error ad sint accusantium molestias recusandae esse culpa doloremque labore fuga officia perspiciatis beatae mollitia earum voluptatibus numquam inventore dolorem ipsa modi molestiae porro illum pariatur nisi eligendi laudantium architecto rerum deserunt distinctio repellendus sit quod nemo obcaecati laboriosam quibusdam.</div>
<div class="tab-pane" id="profile4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, at, laboriosam, possimus, nam rem quia reiciendis sit vel totam id eum quasi aperiam officiis omnis ipsum quo praesentium quaerat unde mollitia maiores. Dignissimos, deleniti, eos, quibusdam quae voluptatibus obcaecati voluptatum iure quas voluptates cupiditate incidunt voluptate dolorem delectus exercitationem earum?</div>
<div class="tab-pane" id="messages4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ipsam, distinctio, ea quas quam mollitia enim dolorem aliquam laboriosam exercitationem ullam iste quis possimus aut atque est beatae temporibus impedit deleniti explicabo ratione esse molestias maiores minima odit? Tempore, omnis, possimus praesentium minus iusto laboriosam vitae officiis deserunt voluptate odio.</div>
<div class="tab-pane" id="settings4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis, ea quam minus aliquid libero quibusdam eos incidunt quo accusantium itaque veritatis reprehenderit optio provident nostrum ipsam aliquam voluptate officia voluptatem magni vitae nisi error maiores dolor natus at perferendis. Eligendi, a deserunt voluptatibus facere dolores rem molestias ad magnam!</div>
</div>

<h3>Round Tabs</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-round">
<li class="active"><a href="#home5" data-toggle="tab">Home</a></li>
<li><a href="#profile5" data-toggle="tab">Profile</a></li>
<li><a href="#messages5" data-toggle="tab">Messages</a></li>
<li><a href="#settings5" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, consequuntur error ad sint accusantium molestias recusandae esse culpa doloremque labore fuga officia perspiciatis beatae mollitia earum voluptatibus numquam inventore dolorem ipsa modi molestiae porro illum pariatur nisi eligendi laudantium architecto rerum deserunt distinctio repellendus sit quod nemo obcaecati laboriosam quibusdam.</div>
<div class="tab-pane" id="profile5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, at, laboriosam, possimus, nam rem quia reiciendis sit vel totam id eum quasi aperiam officiis omnis ipsum quo praesentium quaerat unde mollitia maiores. Dignissimos, deleniti, eos, quibusdam quae voluptatibus obcaecati voluptatum iure quas voluptates cupiditate incidunt voluptate dolorem delectus exercitationem earum?</div>
<div class="tab-pane" id="messages5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ipsam, distinctio, ea quas quam mollitia enim dolorem aliquam laboriosam exercitationem ullam iste quis possimus aut atque est beatae temporibus impedit deleniti explicabo ratione esse molestias maiores minima odit? Tempore, omnis, possimus praesentium minus iusto laboriosam vitae officiis deserunt voluptate odio.</div>
<div class="tab-pane" id="settings5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis, ea quam minus aliquid libero quibusdam eos incidunt quo accusantium itaque veritatis reprehenderit optio provident nostrum ipsam aliquam voluptate officia voluptatem magni vitae nisi error maiores dolor natus at perferendis. Eligendi, a deserunt voluptatibus facere dolores rem molestias ad magnam!</div>
</div>
                            

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading panel-heading-link">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        Collapsible Group Item #1
    </a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
    <div class="panel-body">
        ...
    </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-heading-link">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
        Collapsible Group Item #2
    </a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
        ...
    </div>
</div>
</div>
...
</div>
                            

<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading panel-plus-link">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        Collapsible Group Item #1
    </a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
    <div class="panel-body">
        ...
    </div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading panel-plus-link">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
        Collapsible Group Item #2
    </a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
        ...
    </div>
</div>
</div>
...
</div>