CODEWITHSUNDEEP
htmlcssbootstrap-4
Dillinger
Dillinger

Reputation: 1903

How to create collapsible sidebar in the same div?

Suppose I have a div which is the container of a sidebar (available on the left) and of a main content (available on the right).

I want make the sidebar navigation collapsible, so through a button the user can hide or display the sidebar.

I'm currently using Bootstrap 4 and all the solution proposed on Internet have a lot of work to make this, I'm looking for a simple way to achieve this.

Actually this is my code:

<div class="container-fluid">
<div class="row">
    <div class="col-3 px-1 bg-dark" id="sticky-sidebar">
        <div class="py-2 sticky-top">
            <div class="nav flex-column">
                <a href="" class="nav-link">Sidebar</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
            </div>
        </div>
    </div>
    <div class="col" id="main">
        <h1>Main Area</h1>
        <p>Main content.</p>
    </div>
 </div>
</div>

As you can see from this codeply I already organized the div structure into two blocks:

enter image description here

How can I make the sidebar available in the div collapsible?

Thanks in advance for any help.

Upvotes: 1

Views: 1106

Answers (1)

Pete
Pete

Reputation: 58462

You can wrap it in a div with an id and the classes navbar-collapse and collapse. You can then add a toggler:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
  <div class="nav flex-column">
    <a href="" class="nav-link">Sidebar</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
  </div>
</div>

Example Bootply

More information on the navbar and classes

Update per comments

To toggle the sidebar off the side, you can need to add a bit of javascript and animate the max width:

$('.navbar-toggler').on('click', function(e) {
  e.preventDefault();
  var target = $(this).data('target');
  $(target).toggleClass('hide') ;
});
@import url("//maxcdn.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css");
/* CSS used here will be applied after bootstrap.css */
#sticky-sidebar {
  min-height: 100vh;
  transition: max-width 1s;
  overflow:hidden;
}
#sticky-sidebar.hide {
  max-width:0;
  padding:0 !important;
}
.navbar-toggler {
  background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-3 px-1 bg-dark" id="sticky-sidebar">
      <div class="py-2 sticky-top">
          <div class="nav flex-column">
            <a href="" class="nav-link">Sidebar</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
          </div>
        </div>
    </div>
    <div class="col" id="main">
      
        <button class="navbar-toggler" type="button" data-target="#sticky-sidebar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <h1>Main Area</h1>
      <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
        raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby
        chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>

      <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade
        disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache
        food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>

      <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
        raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby
        chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>

      <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
        raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby
        chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions