Toggle Bootstrap Off Canvas Content Panels with Buttons

October 25, 2020 -

Utilising a Bootstrap 4 WordPress theme - below code snippets to toggle off-canvas content.

For multiple panels of content the trigger button data attribute - data-trigger needs a unique value that matches its content panel in the case below it is the article element which has the matching id value.

HTML 

<b class="screen-overlay"></b>

<button data-trigger="#card_mobile" class="btn btn-warning" type="button">Show card from left side</button>

<article class="card offcanvas" id="card_mobile">
    <div class="card-body">
        <div class="offcanvas-header">  
            <button class="btn btn-danger btn-close float-right"> × Close </button>
        </div>
        <h5>This card becomes offcanvas on mobile view</h5>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div>
</article>

<button data-trigger="#card_mobile-2" class="btn btn-warning" type="button">Show card from right side</button>

<article class="card offcanvas offcanvas-right" id="card_mobile-2">
    <div class="card-body">
        <div class="offcanvas-header">  
            <button class="btn btn-danger btn-close float-right"> × Close </button>
        </div>
        <h5>This 2nd card becomes offcanvas on mobile view</h5>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div>
</article>

CSS 

body.offcanvas-active{
  overflow:hidden;
}

.screen-overlay {
  width:0%;
  height: 100%;
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  opacity:0;
  visibility:hidden;
  background-color: rgba(34, 34, 34, 0.6);
  transition:opacity .2s linear, visibility .1s, width 1s ease-in;
}

.screen-overlay.show {
    transition:opacity .5s ease, width 0s;
    opacity:1;
    width:100%;
    visibility:visible;
}

.offcanvas{
    visibility: hidden;
    transform:translateX(-100%);
    border-radius:0; 
    display:block;
    position: fixed !important;
    top: 0; left:0;
    height: 100%;
    z-index: 1200;
    width:75%;
    overflow-y: scroll;
    overflow-x: hidden;
    transition: visibility .2s ease-in-out, transform .2s ease-in-out;
}

.offcanvas.offcanvas-right {
    right: 0;
    left: auto;
    transform: translateX(100%); 
    }
    

.offcanvas.show{
    visibility: visible;
    transform: translateX(0);
}

jQuery 

jQuery(document).ready(function($) {
    
    $("[data-trigger]").on("click", function(e){
        e.preventDefault();
        e.stopPropagation();
        var offcanvas_id =  $(this).attr('data-trigger');
        $(offcanvas_id).toggleClass("show");
        $('body').toggleClass("offcanvas-active");
        $(".screen-overlay").toggleClass("show");
    }); 

   	// Close menu when pressing ESC
    $(document).on('keydown', function(event) {
        if(event.keyCode === 27) {
           $(".screen-overlay").removeClass("show");
           $(".offcanvas").removeClass("show");
           $("body").removeClass("overlay-active");
        }
    });

    $(".btn-close, .screen-overlay").click(function(e){
    	$(".screen-overlay").removeClass("show");
        $(".offcanvas").removeClass("show");
        $("body").removeClass("offcanvas-active");


    }); 
 });

Demo

This card becomes offcanvas on mobile view
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This 2nd card becomes offcanvas on mobile view
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ref - Bootstrap Menu

Related Posts:

Categorized WordPress Tagged , ,

Leave all Comment