content logo

Bootstrap Tabs:

Animating Hideable Bootstrap Tabs Sidebar

We all know how useful Bootstrap tabs are and how much they can help you when trying to organize different sections of your website in the process of designing. You can put many different things in your tabs including categories and subcategories of your content. This way, the users will be able to see everything your site offers in a well organized list with the links to the respective pages. This makes sure you don’t need a messy homepage in order to display the different categories you have. Instead, you can have your homepage dedicated to more important features which you cannot put in the tabs section.

Tabs can be placed wherever you want although the most common location for them in a page is at the top of the screen. In this post, we are showing you a Bootstrap tabs right side bar. As the name suggests, it is similar to a sidebar and is located at the right side of the screen. It is a Bootstrap tabs animation model which means the items will be displayed with a fade motion. It is much better than having the items just appearing out of nowhere. You can get this show hide Bootstrap tabs code for your own website right now.

#Bootstrap Tabs Right Sidebar #Bootstrap Tabs Animation #Show Hide Bootstrap Tabs

<!-- This script got from www.frontendfreecode.com -->
<div class="pull-right toggle-right-sidebar">
  <span class="fa fa-2x title-open-right-sidebar tooltipstered fa-indent"></span>
</div>

<div id="right-sidebar" class="right-sidebar-notifcations nav-collapse">
  <div class="bs-example bs-example-tabs right-sidebar-tab-notification" data-example-id="togglable-tabs">
    <ul id="right-sidebar-tabs" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
        <a href="#activities" id="activities-tab" role="tab" data-toggle="tab" aria-controls="activities" aria-expanded="true">Activities</a>
      </li>
      <li role="presentation" class="">
        <a href="#tasks" role="tab" id="tasks-tab" data-toggle="tab" aria-controls="tasks" aria-expanded="false">Tasks</a>
      </li>
      <li role="presentation" class="">
        <a href="#settings" role="tab" id="settings-tab" data-toggle="tab" aria-controls="settings" aria-expanded="false">Settings</a>
      </li>

    </ul>
    <div id="right-sidebar-tab-content" class="tab-content">
      <div role="tabpanel" class="tab-pane fade active in" id="activities" aria-labelledby="activities-tab">
        <div class="right-sidebar-panel-content-heading">
          <h4><span class="icon-user"></span> Latest user activities</h4>
          <small>10 Latest Activities</small>
        </div>
        <div class="right-sidebar-panel-content animated fadeInRight" tabindex="5001" style="overflow: hidden; outline: none;">

          <ul class="right-sidebar-list" tabindex="5004" style="overflow: hidden; outline: none;">
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - User Login...</h5>
                <p>Accessing the system...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating...</h5>
                <p>Updating user ID 1 ...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting...</h5>
                <p>Deleting user message...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Accessing...</h5>
                <p>User accessing the sys...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Viewing...</h5>
                <p>Viewing the user...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Reading...</h5>
                <p>Reading user message...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Registering...</h5>
                <p>Registering new user...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Registering...</h5>
                <p>Registering new user...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Registering...</h5>
                <p>Registering new user...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Registering...</h5>
                <p>Registering new user...</p>
              </div>
            </li>

          </ul>

          <div id="ascrail2004" class="nicescroll-rails" style="width: 3px; z-index: 1000; cursor: default; position: absolute; top: 0px; left: 286px; height: 513px; opacity: 0;">
            <div style="position: relative; top: 0px; float: right; width: 3px; height: 446px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
          <div id="ascrail2004-hr" class="nicescroll-rails" style="height: 3px; z-index: 1000; top: 510px; left: 0px; position: absolute; cursor: default; display: none; width: 286px; opacity: 0;">
            <div style="position: relative; top: 0px; height: 3px; width: 289px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tasks" aria-labelledby="tasks-tab">
        <div class="right-sidebar-panel-content-heading">
          <h4><span class="icon-list"></span> Recent tasks</h4>
          <small>15 Ongoing tasks</small>
        </div>
        <div class="right-sidebar-panel-content animated fadeInRight" tabindex="5002" style="overflow: hidden; outline: none;">

          <ul class="right-sidebar-list" tabindex="5005" style="overflow: hidden; outline: none;">
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5><a href="#">John Doe - Creating Tasks</a></h5>
                <p>To update the sidebar...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>

          </ul>

          <div id="ascrail2005" class="nicescroll-rails" style="width: 3px; z-index: 1000; cursor: default; position: absolute; top: 0px; left: -3px; height: 513px; display: none;">
            <div style="position: relative; top: 0px; float: right; width: 3px; height: 0px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
          <div id="ascrail2005-hr" class="nicescroll-rails" style="height: 3px; z-index: 1000; top: 510px; left: 0px; position: absolute; cursor: default; display: none;">
            <div style="position: relative; top: 0px; height: 3px; width: 0px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="settings" aria-labelledby="settings-tab">
        <div class="right-sidebar-panel-content-heading">
          <h4><span class="icon-list"></span> System Settins</h4>
          <small>80% Completed Settings</small>
        </div>
        <div class="right-sidebar-panel-content animated fadeInRight" tabindex="5003" style="overflow: hidden; outline: none;">
          <ul class="right-sidebar-list" tabindex="5006" style="overflow: hidden; outline: none;">
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox" checked="">
                                            <i data-on="YES" data-off="NO"></i> Email Notifications
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> Daily Email Notifiactions
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox" checked="">
                                            <i data-on="YES" data-off="NO"></i> Show user visitors
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox" checked="">
                                            <i data-on="YES" data-off="NO"></i> Show birthdate
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> Show address
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> Payment Recurring
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> SMS Notifications
                                        </label>
            </li>
          </ul>
          <div id="ascrail2006" class="nicescroll-rails" style="width: 3px; z-index: 1000; cursor: default; position: absolute; top: 0px; left: -3px; height: 513px; display: none; opacity: 0;">
            <div style="position: relative; top: 0px; float: right; width: 3px; height: 0px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
          <div id="ascrail2006-hr" class="nicescroll-rails" style="height: 3px; z-index: 1000; top: 510px; left: 0px; position: absolute; cursor: default; display: none; opacity: 0;">
            <div style="position: relative; top: 0px; height: 3px; width: 0px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; left: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
.right-sidebar-tab-notification {
   height: 670px;
 }
 /* ============================================================
RIGHT SIDEBAR SECTION
============================================================ */
 
 #right-sidebar {
   background: #fff;
   width: 240px;
   position: fixed;
   height: 100%;
   z-index: 1000;
   right: 0px;
   top: 0;
   margin-top: 60px;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
 }
 
 .right-sidebar-notifcations {
   width: 288.9px !important;
 }
 
 .right-sidebar-notifcations #right-sidebar-tabs {
   background: #3A434D;
 }
 
 .right-sidebar-notifcations .nav-tabs>li.active>a,
 .nav-tabs>li.active>a:focus {
   background-color: #ffffff !important;
   color: gray !important;
 }
 
 .right-sidebar-notifcations #right-sidebar-tabs li {
   width: 33.3333%;
 }
 
 .right-sidebar-notifcations #right-sidebar-tabs li a {
   color: white;
   font-weight: bold;
   text-align: center;
 }
 
 .right-sidebar-notifcations .nav-tabs {
   border-bottom: 0px solid #ddd;
 }
 
 .right-sidebar-notifcations .nav-tabs>li>a {
   border-radius: 0 0 0 0 !important;
   border: 0 solid transparent !important;
   margin-right: 0 !important;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 
 .right-sidebar-notifcations .nav-tabs>li.active>a:hover {
   background-color: white !important;
   color: gray !important;
 }
 
 .right-sidebar-notifcations .nav>li>a:focus,
 .nav>li>a:hover {
   background-color: #fff;
   color: gray !important;
 }
 
 .right-sidebar-notifcations .tab-content {
   padding: 0px;
 }
 
 .right-sidebar-notifcations .tab-content .right-sidebar-list {
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
 
 .right-sidebar-notifcations .tab-content .right-sidebar-list li {
   padding-left: 15px !important;
   padding-right: 15px !important;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading {
   padding: 15px !important;
 }
 /** Right Sidebar Tabs Content **/
 
 #right-sidebar #right-sidebar-tab-content .tab-pane {}
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading {
   padding: 10px;
   border-bottom: 1px solid #F5EFF5;
   font-family: arial;
   background-color: #ffffff;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading h4 {
   /*line-height: 1px;*/
   text-transform: uppercase;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content {
   padding: 0px;
   height: 492px;
 }
 
 .right-sidebar-notifcations .right-sidebar-tab-notification {
   height: 670px;
 }
 /* Right Sidebar Latest Activities */
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list {
   list-style: none;
   padding-left: 10px;
   padding-right: 10px;
   height: 513px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li {
   border-bottom: 1px solid #F5EFF5;
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 6px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li img {
   border-radius: 50%;
   -webkit-border-radius: 50%;
   width: 80%;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li div.pull-left {
   width: 46px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li p {
   line-height: 5px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li h5 {
   font-weight: bold;
   margin-top: 8px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) {
   background-color: #FCFBFB;
   padding-top: 5px;
   margin-top: 1px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) div.pull-left {
   margin-top: 2px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) > div {
   margin-top: -8px;
 }
 
 .hide-right-sidebar {
   /*right:-240px !important;*/
   margin-right: -240px;
 }
 
 #right-sidebar > .rightside-navigation {
   height: 100%;
   margin-top: -78px;
 }
 
 #right-sidebar ul.sidebar-menu,
 ul.sidebar-menu li ul.sub {
   margin: -2px 0 0;
   padding: 0;
 }
 
 #right-sidebar ul.sidebar-menu {
   padding-top: 80px;
   list-style: none;
   /*background-color: #fff;*/
 }
 
 .fixed-width-unfixed-header #right-sidebar > .rightside-navigation > ul {
   padding-top: 20px !important;
 }
 
 #right-sidebar>ul>li>ul.sub {
   display: none;
 }
 
 #right-sidebar .sub-menu>.sub li a {
   padding-left: 46px;
 }
 
 #right-sidebar>ul>li.active>ul.sub,
 #sidebar>ul>li>ul.sub>li>a {
   display: block;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li {
   background: #F0F0F0;
   margin-bottom: 0;
   margin-left: 0;
   margin-right: 0;
   list-style: none;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a {
   margin-left: 25px;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li:before {
   content: "";
   top: -1px;
   bottom: -1px;
   position: absolute;
   width: 1px;
   border-left: 0px dashed rgba(12, 12, 12, 0.3);
   z-index: 1;
   margin-left: 40px;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a:before {
   content: "";
   left: 40px;
   top: 20px;
   position: absolute;
   display: block;
   width: 21px;
   border-bottom: 0px dashed rgba(12, 12, 12, 0.3);
   z-index: 1;
 }
 /** For second level sub menu **/
 
 #right-sidebar ul.sidebar-menu li ul.sub li ul.sub li a:before {
   content: "";
   left: 40px;
   top: 20px;
   position: absolute;
   display: block;
   width: 34px;
   border-bottom: 0px dashed rgba(12, 12, 12, 0.3);
   z-index: 1;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li > ul.sub li a {
   padding-left: 60px !important;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a {
   font-size: 12px;
   padding-top: 13px;
   padding-bottom: 13px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
   color: #738699;
   position: relative;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a:hover,
 #right-sidebar ul.sidebar-menu li ul.sub li.active a {
   color: #ffffff;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
   display: block;
   background: #C4C4C4;
 }
 
 #right-sidebar ul.sidebar-menu li {
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 #right-sidebar ul.sidebar-menu li.sub-menu {
   line-height: 15px;
 }
 
 #right-sidebar ul.sidebar-menu ul.sub li {
   border-bottom: none;
 }
 
 #right-sidebar ul.sidebar-menu li a span {
   display: inline-block;
 }
 
 #right-sidebar ul.sidebar-menu li a {
   color: #84888D;
   text-decoration: none;
   display: block;
   padding: 8px 0 8px 25px;
   font-size: 12px;
   outline: none;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 
 #right-sidebar ul.sidebar-menu li a.active,
 #right-sidebar ul.sidebar-menu li a:focus {
   background-color: #eee;
   font-weight: bold;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a.active {
   font-weight: bold;
 }
 
 #right-sidebar ul.sidebar-menu li a i.fa {
   padding: 10px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 
 #right-sidebar ul.sidebar-menu li a.active i.fa,
 ul.sidebar-menu li a:hover i.fa,
 ul.sidebar-menu li a:focus i.fa {
   background: #76CF1C;
   color: #ffffff;
   padding: 10px;
   -webkit-transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   -o-transition: all 0.8s ease;
   -ms-transition: all 0.8s ease;
   transition: all 0.8s ease;
   webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 
 #right-sidebar ul.sidebar-menu li a i {
   font-size: 15px;
   padding-right: 6px;
 }
 
 #right-sidebar ul.sidebar-menu li a:hover i,
 ul.sidebar-menu li a:focus i {
   color: #ffffff;
 }
 
 #right-sidebar ul.sidebar-menu li a.active i {
   color: #ffffff;
 }
 
 .mail-info,
 .mail-info:hover {
   margin: -3px 6px 0 0;
   font-size: 11px;
 }
 /** Profile Sidebar **/
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile {
   background-color: #3A434D;
   padding: 10px;
   color: #fff;
   text-align: center;
   border-bottom: 10px solid #76CF1C;
 }
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile .name {
   margin-top: 10px;
 }
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile .image img {
   border-radius: 60%;
 }
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile .status {
   margin-top: -10px;
   font-size: 7;
 }
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile .status small i {
   color: #76CF1C;
 }
 /* ============================================================
RIGHT SIDEBAR TOGGLE SECTION
============================================================ */
 
 .btn-bottom-right-sidebar-close {
   width: 32px;
   height: 32px;
   position: fixed;
   bottom: 10px;
   right: 10px;
   background: #E74C3C !important;
   font-size: 15px;
   padding: 6px 8px 8px 10px;
   border-radius: 100%;
   color: #fff;
   -webkit-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.35);
   -moz-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.35);
   box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.35);
   opacity: 0.8;
   cursor: pointer;
   display: none;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 /*.hide-right-bar-notifications .right-sidebar-close {
    display: none;
}*/
 
 .right-sidebar-close:hover {
   opacity: 0.6;
   -webkit-transform: scale(1.3);
   transform: scale(1.3);
 }
 
 .right-sidebar-toggle-box {
   float: left;
   margin-top: 23px;
   margin-left: -15px;
   background: #76CF1C;
   border-radius: 2%;
   -webkit-border-radius: 2%;
   width: 32px;
   height: 32px;
   position: absolute;
   right: -15px;
 }
 
 .right-sidebar-toggle-box .fa-bars {
   cursor: pointer;
   display: inline-block;
   font-size: 15px;
   padding: 8px 8px 8px 9px;
   color: white;
 }
 
 .right-sidebar-toggle-box:hover {
   background: #F6F6F6;
 }
 
 .hide-left-bar {
   margin-left: -240px !important;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
 
 .open-right-bar {
   right: 0px !important;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
 
 .merge-right {
   margin-right: 0px !important;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
 }
 
 .merge-left {
   margin-left: 0px !important;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
 }
 
 .hide-right-bar {
   margin-right: -240px !important;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
 
 .hide-right-bar-notifications {
   margin-right: -300px !important;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
 
 .toggle-right-box {
   float: left;
   background: #f6f6f6;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   width: 35px;
   height: 35px;
 }
 
 .toggle-right-box:hover {
   background: #32D2C9;
 }
 
 .toggle-right-box:hover .fa-bars {
   color: rgba(0, 0, 0, 0.3);
 }
 
 .toggle-right-box .fa-bars {
   cursor: pointer;
   display: inline-block;
   font-size: 15px;
   padding: 10px;
   color: #bfbfc1;
 }
$('.toggle-right-sidebar span').on('click', function () {

  if ($("#right-sidebar").hasClass("hide-right-bar-notifications")) {

    $(".btn-bottom-right-sidebar-close").fadeIn("fast"); //show the button close for sidebar notifications

    //insert class to left sidebar
    if (!$("#sidebar").hasClass('hide-left-bar')) {

      $("#sidebar").addClass("hide-left-bar");
      $("#main-content").addClass("merge-left");

      if ($("html").outerWidth() <= 750) {
        if ($('#sidebar').hasClass('show-left-bar-mobile')) {
          $('#sidebar').removeClass("show-left-bar-mobile");
        }
      }

    } else {
      if ($("html").outerWidth() <= 750) {
        if ($('#sidebar').hasClass('show-left-bar-mobile')) {
          $('#sidebar').removeClass("show-left-bar-mobile");
        }
      }
    }

    $("#right-sidebar").removeClass("hide-right-bar-notifications");

    $("#right-sidebar").addClass(" animated fadeInRight").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
      $(this).removeClass(" animated fadeInRight");
    });

    $("#main-content").addClass("merge-right-sidebar-notifications");

    $(this).removeClass("fa-outdent");
    $(this).addClass("fa-indent");

  } else {

    $(".btn-bottom-right-sidebar-close").fadeOut("fast"); //hide the button close for sidebar notifications

    //remove class to left sidebar
    if ($("#sidebar").hasClass('hide-left-bar')) {
      $("#sidebar").removeClass("hide-left-bar");
      $("#main-content").removeClass("merge-left");
    }

    $("#right-sidebar").addClass("hide-right-bar-notifications");

    $("#right-sidebar").addClass(" animated fadeOutRight").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
      $(this).removeClass(" animated fadeOutRight");
    });

    $("#main-content").removeClass("merge-right-sidebar-notifications");

    $(this).removeClass("fa-indent");
    $(this).addClass("fa-outdent");
  }

});
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<style>
.right-sidebar-tab-notification {
   height: 670px;
 }
 /* ============================================================
RIGHT SIDEBAR SECTION
============================================================ */
 
 #right-sidebar {
   background: #fff;
   width: 240px;
   position: fixed;
   height: 100%;
   z-index: 1000;
   right: 0px;
   top: 0;
   margin-top: 60px;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
 }
 
 .right-sidebar-notifcations {
   width: 288.9px !important;
 }
 
 .right-sidebar-notifcations #right-sidebar-tabs {
   background: #3A434D;
 }
 
 .right-sidebar-notifcations .nav-tabs>li.active>a,
 .nav-tabs>li.active>a:focus {
   background-color: #ffffff !important;
   color: gray !important;
 }
 
 .right-sidebar-notifcations #right-sidebar-tabs li {
   width: 33.3333%;
 }
 
 .right-sidebar-notifcations #right-sidebar-tabs li a {
   color: white;
   font-weight: bold;
   text-align: center;
 }
 
 .right-sidebar-notifcations .nav-tabs {
   border-bottom: 0px solid #ddd;
 }
 
 .right-sidebar-notifcations .nav-tabs>li>a {
   border-radius: 0 0 0 0 !important;
   border: 0 solid transparent !important;
   margin-right: 0 !important;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 
 .right-sidebar-notifcations .nav-tabs>li.active>a:hover {
   background-color: white !important;
   color: gray !important;
 }
 
 .right-sidebar-notifcations .nav>li>a:focus,
 .nav>li>a:hover {
   background-color: #fff;
   color: gray !important;
 }
 
 .right-sidebar-notifcations .tab-content {
   padding: 0px;
 }
 
 .right-sidebar-notifcations .tab-content .right-sidebar-list {
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
 
 .right-sidebar-notifcations .tab-content .right-sidebar-list li {
   padding-left: 15px !important;
   padding-right: 15px !important;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading {
   padding: 15px !important;
 }
 /** Right Sidebar Tabs Content **/
 
 #right-sidebar #right-sidebar-tab-content .tab-pane {}
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading {
   padding: 10px;
   border-bottom: 1px solid #F5EFF5;
   font-family: arial;
   background-color: #ffffff;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading h4 {
   /*line-height: 1px;*/
   text-transform: uppercase;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content {
   padding: 0px;
   height: 492px;
 }
 
 .right-sidebar-notifcations .right-sidebar-tab-notification {
   height: 670px;
 }
 /* Right Sidebar Latest Activities */
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list {
   list-style: none;
   padding-left: 10px;
   padding-right: 10px;
   height: 513px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li {
   border-bottom: 1px solid #F5EFF5;
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 6px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li img {
   border-radius: 50%;
   -webkit-border-radius: 50%;
   width: 80%;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li div.pull-left {
   width: 46px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li p {
   line-height: 5px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li h5 {
   font-weight: bold;
   margin-top: 8px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) {
   background-color: #FCFBFB;
   padding-top: 5px;
   margin-top: 1px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) div.pull-left {
   margin-top: 2px;
 }
 
 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) > div {
   margin-top: -8px;
 }
 
 .hide-right-sidebar {
   /*right:-240px !important;*/
   margin-right: -240px;
 }
 
 #right-sidebar > .rightside-navigation {
   height: 100%;
   margin-top: -78px;
 }
 
 #right-sidebar ul.sidebar-menu,
 ul.sidebar-menu li ul.sub {
   margin: -2px 0 0;
   padding: 0;
 }
 
 #right-sidebar ul.sidebar-menu {
   padding-top: 80px;
   list-style: none;
   /*background-color: #fff;*/
 }
 
 .fixed-width-unfixed-header #right-sidebar > .rightside-navigation > ul {
   padding-top: 20px !important;
 }
 
 #right-sidebar>ul>li>ul.sub {
   display: none;
 }
 
 #right-sidebar .sub-menu>.sub li a {
   padding-left: 46px;
 }
 
 #right-sidebar>ul>li.active>ul.sub,
 #sidebar>ul>li>ul.sub>li>a {
   display: block;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li {
   background: #F0F0F0;
   margin-bottom: 0;
   margin-left: 0;
   margin-right: 0;
   list-style: none;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a {
   margin-left: 25px;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li:before {
   content: "";
   top: -1px;
   bottom: -1px;
   position: absolute;
   width: 1px;
   border-left: 0px dashed rgba(12, 12, 12, 0.3);
   z-index: 1;
   margin-left: 40px;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a:before {
   content: "";
   left: 40px;
   top: 20px;
   position: absolute;
   display: block;
   width: 21px;
   border-bottom: 0px dashed rgba(12, 12, 12, 0.3);
   z-index: 1;
 }
 /** For second level sub menu **/
 
 #right-sidebar ul.sidebar-menu li ul.sub li ul.sub li a:before {
   content: "";
   left: 40px;
   top: 20px;
   position: absolute;
   display: block;
   width: 34px;
   border-bottom: 0px dashed rgba(12, 12, 12, 0.3);
   z-index: 1;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li > ul.sub li a {
   padding-left: 60px !important;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a {
   font-size: 12px;
   padding-top: 13px;
   padding-bottom: 13px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
   color: #738699;
   position: relative;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a:hover,
 #right-sidebar ul.sidebar-menu li ul.sub li.active a {
   color: #ffffff;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
   display: block;
   background: #C4C4C4;
 }
 
 #right-sidebar ul.sidebar-menu li {
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 #right-sidebar ul.sidebar-menu li.sub-menu {
   line-height: 15px;
 }
 
 #right-sidebar ul.sidebar-menu ul.sub li {
   border-bottom: none;
 }
 
 #right-sidebar ul.sidebar-menu li a span {
   display: inline-block;
 }
 
 #right-sidebar ul.sidebar-menu li a {
   color: #84888D;
   text-decoration: none;
   display: block;
   padding: 8px 0 8px 25px;
   font-size: 12px;
   outline: none;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 
 #right-sidebar ul.sidebar-menu li a.active,
 #right-sidebar ul.sidebar-menu li a:focus {
   background-color: #eee;
   font-weight: bold;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 
 #right-sidebar ul.sidebar-menu li ul.sub li a.active {
   font-weight: bold;
 }
 
 #right-sidebar ul.sidebar-menu li a i.fa {
   padding: 10px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 
 #right-sidebar ul.sidebar-menu li a.active i.fa,
 ul.sidebar-menu li a:hover i.fa,
 ul.sidebar-menu li a:focus i.fa {
   background: #76CF1C;
   color: #ffffff;
   padding: 10px;
   -webkit-transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   -o-transition: all 0.8s ease;
   -ms-transition: all 0.8s ease;
   transition: all 0.8s ease;
   webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }
 
 #right-sidebar ul.sidebar-menu li a i {
   font-size: 15px;
   padding-right: 6px;
 }
 
 #right-sidebar ul.sidebar-menu li a:hover i,
 ul.sidebar-menu li a:focus i {
   color: #ffffff;
 }
 
 #right-sidebar ul.sidebar-menu li a.active i {
   color: #ffffff;
 }
 
 .mail-info,
 .mail-info:hover {
   margin: -3px 6px 0 0;
   font-size: 11px;
 }
 /** Profile Sidebar **/
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile {
   background-color: #3A434D;
   padding: 10px;
   color: #fff;
   text-align: center;
   border-bottom: 10px solid #76CF1C;
 }
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile .name {
   margin-top: 10px;
 }
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile .image img {
   border-radius: 60%;
 }
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile .status {
   margin-top: -10px;
   font-size: 7;
 }
 
 #right-sidebar ul.sidebar-menu li.sidebar-profile .status small i {
   color: #76CF1C;
 }
 /* ============================================================
RIGHT SIDEBAR TOGGLE SECTION
============================================================ */
 
 .btn-bottom-right-sidebar-close {
   width: 32px;
   height: 32px;
   position: fixed;
   bottom: 10px;
   right: 10px;
   background: #E74C3C !important;
   font-size: 15px;
   padding: 6px 8px 8px 10px;
   border-radius: 100%;
   color: #fff;
   -webkit-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.35);
   -moz-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.35);
   box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.35);
   opacity: 0.8;
   cursor: pointer;
   display: none;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 /*.hide-right-bar-notifications .right-sidebar-close {
    display: none;
}*/
 
 .right-sidebar-close:hover {
   opacity: 0.6;
   -webkit-transform: scale(1.3);
   transform: scale(1.3);
 }
 
 .right-sidebar-toggle-box {
   float: left;
   margin-top: 23px;
   margin-left: -15px;
   background: #76CF1C;
   border-radius: 2%;
   -webkit-border-radius: 2%;
   width: 32px;
   height: 32px;
   position: absolute;
   right: -15px;
 }
 
 .right-sidebar-toggle-box .fa-bars {
   cursor: pointer;
   display: inline-block;
   font-size: 15px;
   padding: 8px 8px 8px 9px;
   color: white;
 }
 
 .right-sidebar-toggle-box:hover {
   background: #F6F6F6;
 }
 
 .hide-left-bar {
   margin-left: -240px !important;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
 
 .open-right-bar {
   right: 0px !important;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
 
 .merge-right {
   margin-right: 0px !important;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
 }
 
 .merge-left {
   margin-left: 0px !important;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
 }
 
 .hide-right-bar {
   margin-right: -240px !important;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
 
 .hide-right-bar-notifications {
   margin-right: -300px !important;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
 
 .toggle-right-box {
   float: left;
   background: #f6f6f6;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   width: 35px;
   height: 35px;
 }
 
 .toggle-right-box:hover {
   background: #32D2C9;
 }
 
 .toggle-right-box:hover .fa-bars {
   color: rgba(0, 0, 0, 0.3);
 }
 
 .toggle-right-box .fa-bars {
   cursor: pointer;
   display: inline-block;
   font-size: 15px;
   padding: 10px;
   color: #bfbfc1;
 }
</style>

</head>
<body>
<div class="pull-right toggle-right-sidebar">
  <span class="fa fa-2x title-open-right-sidebar tooltipstered fa-indent"></span>
</div>

<div id="right-sidebar" class="right-sidebar-notifcations nav-collapse">
  <div class="bs-example bs-example-tabs right-sidebar-tab-notification" data-example-id="togglable-tabs">
    <ul id="right-sidebar-tabs" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
        <a href="#activities" id="activities-tab" role="tab" data-toggle="tab" aria-controls="activities" aria-expanded="true">Activities</a>
      </li>
      <li role="presentation" class="">
        <a href="#tasks" role="tab" id="tasks-tab" data-toggle="tab" aria-controls="tasks" aria-expanded="false">Tasks</a>
      </li>
      <li role="presentation" class="">
        <a href="#settings" role="tab" id="settings-tab" data-toggle="tab" aria-controls="settings" aria-expanded="false">Settings</a>
      </li>

    </ul>
    <div id="right-sidebar-tab-content" class="tab-content">
      <div role="tabpanel" class="tab-pane fade active in" id="activities" aria-labelledby="activities-tab">
        <div class="right-sidebar-panel-content-heading">
          <h4><span class="icon-user"></span> Latest user activities</h4>
          <small>10 Latest Activities</small>
        </div>
        <div class="right-sidebar-panel-content animated fadeInRight" tabindex="5001" style="overflow: hidden; outline: none;">

          <ul class="right-sidebar-list" tabindex="5004" style="overflow: hidden; outline: none;">
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - User Login...</h5>
                <p>Accessing the system...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating...</h5>
                <p>Updating user ID 1 ...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting...</h5>
                <p>Deleting user message...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Accessing...</h5>
                <p>User accessing the sys...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Viewing...</h5>
                <p>Viewing the user...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Reading...</h5>
                <p>Reading user message...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Registering...</h5>
                <p>Registering new user...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Registering...</h5>
                <p>Registering new user...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Registering...</h5>
                <p>Registering new user...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Registering...</h5>
                <p>Registering new user...</p>
              </div>
            </li>

          </ul>

          <div id="ascrail2004" class="nicescroll-rails" style="width: 3px; z-index: 1000; cursor: default; position: absolute; top: 0px; left: 286px; height: 513px; opacity: 0;">
            <div style="position: relative; top: 0px; float: right; width: 3px; height: 446px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
          <div id="ascrail2004-hr" class="nicescroll-rails" style="height: 3px; z-index: 1000; top: 510px; left: 0px; position: absolute; cursor: default; display: none; width: 286px; opacity: 0;">
            <div style="position: relative; top: 0px; height: 3px; width: 289px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tasks" aria-labelledby="tasks-tab">
        <div class="right-sidebar-panel-content-heading">
          <h4><span class="icon-list"></span> Recent tasks</h4>
          <small>15 Ongoing tasks</small>
        </div>
        <div class="right-sidebar-panel-content animated fadeInRight" tabindex="5002" style="overflow: hidden; outline: none;">

          <ul class="right-sidebar-list" tabindex="5005" style="overflow: hidden; outline: none;">
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5><a href="#">John Doe - Creating Tasks</a></h5>
                <p>To update the sidebar...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Updating Tasks</h5>
                <p>To update the header UI...</p>
              </div>
            </li>
            <li>
              <div class="pull-left thumbnail-hover">
                <div class="overflow-hidden">
                  <img src="http://frontendfreecode.com/codes/files/profile.png" width="80" alt="image">
                </div>
              </div>
              <div>
                <h5>John Doe - Deleting Tasks</h5>
                <p>Change the content UI...</p>
              </div>
            </li>

          </ul>

          <div id="ascrail2005" class="nicescroll-rails" style="width: 3px; z-index: 1000; cursor: default; position: absolute; top: 0px; left: -3px; height: 513px; display: none;">
            <div style="position: relative; top: 0px; float: right; width: 3px; height: 0px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
          <div id="ascrail2005-hr" class="nicescroll-rails" style="height: 3px; z-index: 1000; top: 510px; left: 0px; position: absolute; cursor: default; display: none;">
            <div style="position: relative; top: 0px; height: 3px; width: 0px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="settings" aria-labelledby="settings-tab">
        <div class="right-sidebar-panel-content-heading">
          <h4><span class="icon-list"></span> System Settins</h4>
          <small>80% Completed Settings</small>
        </div>
        <div class="right-sidebar-panel-content animated fadeInRight" tabindex="5003" style="overflow: hidden; outline: none;">
          <ul class="right-sidebar-list" tabindex="5006" style="overflow: hidden; outline: none;">
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox" checked="">
                                            <i data-on="YES" data-off="NO"></i> Email Notifications
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> Daily Email Notifiactions
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox" checked="">
                                            <i data-on="YES" data-off="NO"></i> Show user visitors
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox" checked="">
                                            <i data-on="YES" data-off="NO"></i> Show birthdate
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> Show address
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> Payment Recurring
                                        </label>
            </li>
            <li>
              <label class="switch-input success">
                                            <input type="checkbox" name="switch-checkbox">
                                            <i data-on="YES" data-off="NO"></i> SMS Notifications
                                        </label>
            </li>
          </ul>
          <div id="ascrail2006" class="nicescroll-rails" style="width: 3px; z-index: 1000; cursor: default; position: absolute; top: 0px; left: -3px; height: 513px; display: none; opacity: 0;">
            <div style="position: relative; top: 0px; float: right; width: 3px; height: 0px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
          <div id="ascrail2006-hr" class="nicescroll-rails" style="height: 3px; z-index: 1000; top: 510px; left: 0px; position: absolute; cursor: default; display: none; opacity: 0;">
            <div style="position: relative; top: 0px; height: 3px; width: 0px; border: 0px solid rgb(255, 255, 255); border-radius: 0px; left: 0px; background-color: rgb(231, 231, 231); background-clip: padding-box;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>
<script>
$('.toggle-right-sidebar span').on('click', function () {

  if ($("#right-sidebar").hasClass("hide-right-bar-notifications")) {

    $(".btn-bottom-right-sidebar-close").fadeIn("fast"); //show the button close for sidebar notifications

    //insert class to left sidebar
    if (!$("#sidebar").hasClass('hide-left-bar')) {

      $("#sidebar").addClass("hide-left-bar");
      $("#main-content").addClass("merge-left");

      if ($("html").outerWidth() <= 750) {
        if ($('#sidebar').hasClass('show-left-bar-mobile')) {
          $('#sidebar').removeClass("show-left-bar-mobile");
        }
      }

    } else {
      if ($("html").outerWidth() <= 750) {
        if ($('#sidebar').hasClass('show-left-bar-mobile')) {
          $('#sidebar').removeClass("show-left-bar-mobile");
        }
      }
    }

    $("#right-sidebar").removeClass("hide-right-bar-notifications");

    $("#right-sidebar").addClass(" animated fadeInRight").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
      $(this).removeClass(" animated fadeInRight");
    });

    $("#main-content").addClass("merge-right-sidebar-notifications");

    $(this).removeClass("fa-outdent");
    $(this).addClass("fa-indent");

  } else {

    $(".btn-bottom-right-sidebar-close").fadeOut("fast"); //hide the button close for sidebar notifications

    //remove class to left sidebar
    if ($("#sidebar").hasClass('hide-left-bar')) {
      $("#sidebar").removeClass("hide-left-bar");
      $("#main-content").removeClass("merge-left");
    }

    $("#right-sidebar").addClass("hide-right-bar-notifications");

    $("#right-sidebar").addClass(" animated fadeOutRight").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
      $(this).removeClass(" animated fadeOutRight");
    });

    $("#main-content").removeClass("merge-right-sidebar-notifications");

    $(this).removeClass("fa-indent");
    $(this).addClass("fa-outdent");
  }

});
</script>

</body>
</html>
Preview