Accordion Sidebar Style

<div class="panel-group accordion nav-side" id="accorside1">
  <div class="panel accordion-group">
    <div class="accordion-heading accordion-collapse-in">
      <a class="active accordion-toggle icon-toggle" data-toggle="collapse" data-parent="#accorside1" href="#accorside-6">
        <i class="fa fa-cogs"></i>Accordion
      </a>
    </div>
    <div id="accorside-6" class="accordion-body collapse in">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading ">
      <a class=" accordion-toggle icon-toggle" data-toggle="collapse" data-parent="#accorside1" href="#accorside-2">
        <i class="fa fa-rocket"></i>Icon
      </a>
    </div>
    <div id="accorside-2" class="accordion-body collapse ">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading ">
      <a class=" accordion-toggle icon-toggle" data-toggle="collapse" data-parent="#accorside1" href="#accorside-1">
        <i class="fa fa-font"></i>Typography
      </a>
    </div>
    <div id="accorside-1" class="accordion-body collapse ">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading ">
      <a class=" accordion-toggle icon-toggle" data-toggle="collapse" data-parent="#accorside1" href="#accorside-3">
        <i class="fa fa-list-alt"></i>Content Box
      </a>
    </div>
    <div id="accorside-3" class="accordion-body collapse ">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading ">
      <a class=" accordion-toggle icon-toggle" data-toggle="collapse" data-parent="#accorside1" href="#accorside-4">
        <i class="fa fa-hand-o-up"></i>Button
      </a>
    </div>
    <div id="accorside-4" class="accordion-body collapse ">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading">
      <a class=" accordion-toggle" href="#">
        <i class="fa fa-tasks"></i>Tab
      </a>
    </div>
  </div>
</div>

<div class="panel-group accordion" id="accor-100">
  <div class="panel accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accor-100" href="#accor-11">
        <i class="fa fa-desktop"></i>Desktop
      </a>
    </div>
    <div id="accor-11" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accor-100" href="#accor-22">
        <i class="fa fa-rocket"></i>Rocket
      </a>
    </div>
    <div id="accor-22" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accor-100" href="#accor-33">
        <i class="fa fa-code"></i>Code
      </a>
    </div>
    <div id="accor-33" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accor-100" href="#accor-44">
        <i class="fa fa-coffee"></i>Coffee
      </a>
    </div>
    <div id="accor-44" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accor-100" href="#accor-66">
        <i class="fa fa-cogs"></i>Settings
      </a>
    </div>
    <div id="accor-66" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accor-100" href="#accor-555">
        <i class="fa fa-cloud-download"></i>Cloud
      </a>
    </div>
    <div id="accor-555" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="accordion" id="acco">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#acco" href="#acco-7">
        <i class="fa fa-comment"></i>Comment
      </a>
    </div>
    <div id="acco-7" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#acco" href="#acco-8">
        <i class="fa fa-camera"></i>Camera
      </a>
    </div>
    <div id="acco-8" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#acco" href="#acco-9">
        <i class="fa fa-film"></i>Film
      </a>
    </div>
    <div id="acco-9" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#acco" href="#acco-10">
        <i class="fa fa-microphone"></i>Microphone
      </a>
    </div>
    <div id="acco-10" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#acco" href="#acco-11">
        <i class="fa fa-video-camera"></i>Camera
      </a>
    </div>
    <div id="acco-11" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#acco" href="#acco-12">
        <i class="fa fa-heart"></i>Heart
      </a>
    </div>
    <div id="acco-12" class="accordion-body collapse">
      <div class="accordion-inner">
        <ul class="list-unstyled">
          <li>
            <a href="#">Item-1</a>
          </li>
          <li>
            <a href="#">Item-2</a>
          </li>
          <li>
            <a href="#">Item-3</a>
          </li>
          <li>
            <a href="#">Item-4</a>
          </li>
          <li>
            <a href="#">Item-5</a>
          </li>
          <li>
            <a href="#">Item-6</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>