content logo
Bootstrap Tabs: Animating Hideable Bootstrap Tabs Sidebar

Bootstrap tabs can be used everywhere, for example in a right sidebar of your page. To make the tabs more beautiful, you can add various features to it. For example add animations to the incoming and leaving tabs, or putting a hide/show button for them. See the following example.

#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 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" target="_blank" href="http://www.frontendfreecode.com">Frontend 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