Collapsible Div Bootstrap

Collapsible Div Bootstrap

by Swapnil Dubey

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a>
          
            jquery-1.12.0.min.js
          
          Remove
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container-fluid">
      <div class="row row-offcanvas row-offcanvas-left">

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="list-group">
            <a href="#" class="list-group-item active">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
          </div>
        </div><!--/span-->
        <div class="col-xs-12 col-sm-9 content">
          <p class="pull-left">
            <button type="button"...

CSS

body {
  padding-top: 50px;
}
/*
 * Style tweaks
 * --------------------------------------------------
 */
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
  height: 100%;
}
body {
  padding-top: 70px;
}
footer {
  padding: 30px 0;
}

/*
 * Off Canvas
 * --------------------------------------------------
 * Greater thav 768px shows the menu by default and also flips the semantics
 * The issue is to show menu for large screens and to hide for small
 * Also need to do something clever to turn off the tabs for when the navigation is hidden
 * Otherwise keyboard users cannot find the focus point
 * (For now I will ignore that for mobile users and also not worry about
 * screen re-sizing popping the menu out.)
 */
@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 25%;
  }

  .row-offcanvas-left {
    left: 25%;
  }

  .row-offcanvas-right .sidebar-offcanvas {
    right: -25%; /* 3 columns */
  	background-color: rgb(255, 255, 255);
  }

  .row-offcanvas-left .sidebar-offcanvas {
    left: -25%; /* 3 columns */
  	background-color: rgb(255, 255, 255);
  }

  .row-offcanvas-right.active {
    right: 0; /* 3 columns */
  }

  .row-offcanvas-left.active {
    left: 0; /* 3 columns */
  }

  .row-offcanvas-right.active .sidebar-offcanvas {
  	background-color: rgb(254, 254, 254);
  }
  .row-offcanvas-left.active .sidebar-offcanvas {
  	background-color: rgb(254, 254, 254);
  }

.row-offcanvas .content {
    width: 75%; /* 9 columns */
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;

  }

  .row-offcanvas.active .content {
    width: 100%; /* 12 columns */
  }
       
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 25%; /* 3 columns */
  }
}
@media...

JavaScript

$(document).ready(function () {
  $('[data-toggle=offcanvas]').click(function () {
    if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
	    $('.list-group-item').attr('tabindex', '-1');
    } else {
	    $('.list-group-item').attr('tabindex', '');
    }
    $('.row-offcanvas').toggleClass('active');
    
  });
});