Frontend Free Code
Frontend Free Code
Developers Codes
Graphics Photo
Crypto World
Code Tutorial
Javascript Codes
Home Home How to How to use Sitemap Sitemap About us About Us Suggested Posts Suggested Privacy Policy Privacy Policy

Feel The Power


content logo

Bootstrap Tabs:

Animating Hideable Bootstrap Tabs Sidebar

Previous CodePrevious Code Next CodeNext Code

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 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://frontendfreecode.com">Free Frontend</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 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">Free Frontend</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
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
TOP CODES
Toggle Switch Button for Changing Language with Bootstrap
Draggable Cards with Bootstrap Grids
Bootstrap Table with Add New Row Button
WHAT IS NEW IN KERIXA?
Glassy Chat Box Code with Reaction Emojis
Dark Neo Brutal Resume Template
Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability
Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability
Flat Photo Frame Template
Cute Photo Frame Template
16 React JS Accordions
17 React JS Buttons
RECENT CODES
Bootstrap Timeline with Colorful Lines and Icons
Simple Dark Vertical Timeline with Bootstrap
Colorful Icons for Bootstrap Timeline Joints
Bootstrap Vertical Timeline with Image Cards and Descriptions
Vertical Bootstrap Timeline in Half Page
Drop Down Menu by React JS
Animating React Popup with Float in and Zoom Effects
Popup vs. Alert Code using React JS
React Glassy Gradient Popup Modal
Animating Toggle Popup Menu with React JS
CATEGORIES
Bootstrap Accordions Bootstrap Buttons
Bootstrap Cards Bootstrap Footers
Bootstrap Forms Bootstrap Grids
Bootstrap Headers Bootstrap Paginations
Bootstrap Popups Bootstrap Progress Bars
Bootstrap Search Boxes Bootstrap Sidebars
Bootstrap Sliders Bootstrap Tables
Bootstrap Tabs Bootstrap Thumbnails
Bootstrap Timeline Bootstrap Toggle Switches
React Accordions React Buttons
React Forms React Headers
React Menus React Popups
React Progress Bars React Sidebars
Frontend Free Code
© 2024 Kerixa Inc