Bootstrap 3 - Collapsible right-side panel like Google Drive Details/Activity panel

Question

Working on a new web layout for our existing product. We'd like the integrated team chat and activity feed displays to be consistently displayed on the right side of each page. We're using Bootstrap 3 and I've got a mock that looks pretty good. I'm using vanilla Bootstrap 12-column sizing styles to do this:

Now we want to allow users to collapse that right-side panel (horizontally), especially for views where horizontal real estate is important (grid views, etc.).

Is there a Bootstrap way to do this? I'm fine with a vertical splitter widget, or a toggle button in the top nav, or whatever other presentation makes sense. It's more the grid sizing that I need advice on.

Answer 1

I had needed a similar approach to one of our projects and fullscreen view is here.

I modified the script and layout a bit to get what you trying to achieve. here is the code and fullscreen is here. I used jquery cookie to retain the view state even after page refresh. Clicking on the Cog Icon will toggle the sidebar. The script is:

    $(function () {
        var $menu = $('#sidebar-wrapper');
        var $content = $('#main-wrapper');
        if ($.cookie('offcanvas') == 'hide') {
            $content.addClass('no-transition');
            $menu.hide();
            $menu.css('right', -($menu.outerWidth() + 10));
            $content.removeClass('col-md-10').addClass('col-md-12');
        }
        else if ($.cookie('offcanvas') == 'show') {
            $menu.show(500).animate({ right: 0 });
            //  $menu.show();
            $content.removeClass('no-transition');
            $content.removeClass('col-md-12').addClass('col-md-10');
        }


        $('.toggle-button').click(function () {
            $content.removeClass('no-transition');
            if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
                // Slide out
                $menu.animate({
                    right: -($menu.outerWidth() + 10)
                }, function () {
                    $menu.hide(1000);
                });
                $content.removeClass('col-md-10').addClass('col-md-12');
                $.cookie('offcanvas', 'hide');
            }
            else {
                // Slide in
                $menu.show(500).animate({ right: 0 });
                $content.removeClass('col-md-12').addClass('col-md-10');
                $.cookie('offcanvas', 'show');
            }
            if ($content.hasClass('col-md-12') && $menu.is(':hidden')) {
                $menu.animate({
                    right: 0
                }, function () {
                    $menu.show(1000);
                });
                //  $menu.show();
                $content.removeClass('no-transition');
                $content.removeClass('col-md-12').addClass('col-md-10');
            }
        });
        $('.bs-tooltip').tooltip();
    });

You can customize the layout/css to get what exactly you wanted to get.