Bootstrap Left and Right sidebar issues

Question

I'm trying to create a page with the following features:

1. There is a left sidebar. This sidebar can be toggled open or closed with a button.
2. There is a right sidebar. This sidebar can be toggled open or closed with a button.
3. There is a main content area. When one or more sidebars is hidden, the main content area expands to fill the void. When both sidebars are open, it looks something like this:

----------------------------------------------------
|   Sidebar-Left  |  Content      |  Sidebar-right |
----------------------------------------------------

• As an extra wrinkle, the main content area actually consists of 3 columns - Left, Main, Right. When either or both sidebars is shown, the Left and Right content areas are hidden and the Main content area expands to fill the void. The Content column, therefore looks something like this:

---------------------------------------------------------
|   Left-Content  |  Main-Content      |  Right-Content |
---------------------------------------------------------

• Finally, the open/close buttons would be pulled-left and pulled-right in a navbar above the whole thing and it would be a fluid container - with no padding between the columns.

No matter what I do - I can't get it to anything close to working.

A skeleton is bootyply or fiddle

Answer 1

Try this:

LIVE_DEMO

CSS:

    div {
        border:2px solid;
    }

HTML:

    <div class="row">
        <div id="DivLeft" class="col-md-3">
            left Side bar
        </div>
        <div id="DivMain" class="col-md-6">
            <div id="DivLeftContent" class="col-md-4">
                Left Content
            </div>
            <div id="DivMainContent" class="col-md-4">
                Main Content
            </div>
            <div id="DivRightContent" class="col-md-4">
                Right Content
            </div>
        </div>
        <div id="DivRight" class="col-md-3 ">
           right Side bar 
        </div>
    </div>

SCRIPT:

 $(document).ready(function () {
            MainDiv();
        });

        var right = 0, left = 0;
        $("#BtnRight").click(function () {
            if (right == 0) {
                $("#DivRight").hide();
                right = 1;
                if (left == 0) {
                    $("#DivMain").removeClass().addClass("col-md-9");
                } else {
                    $("#DivMain").removeClass().addClass("col-md-12");
                }
            } else {
                $("#DivRight").show();
                right = 0;
                if (left == 0) {
                    $("#DivMain").removeClass().addClass("col-md-6");
                } else {
                    $("#DivMain").removeClass().addClass("col-md-9");
                }
            }
            MainDiv();
        });
        $("#BtnLeft").click(function () {
            if (left == 0) {
                $("#DivLeft").hide();
                left = 1;
                if (right == 0) {
                    $("#DivMain").removeClass().addClass("col-md-9");
                } else {
                    $("#DivMain").removeClass().addClass("col-md-12");
                }
            } else {
                $("#DivLeft").show();
                left = 0;
                if (right == 0) {
                    $("#DivMain").removeClass().addClass("col-md-6");
                } else {
                    $("#DivMain").removeClass().addClass("col-md-9");
                }
            }
            MainDiv();
        });

        function MainDiv() {
            if (left == 1 && right == 1) {
                $("#DivLeftContent,#DivRightContent").hide();
                $("#DivMainContent").removeClass().addClass("col-md-12");
            } else {
                $("#DivLeftContent,#DivRightContent").show();
                $("#DivMainContent").removeClass().addClass("col-md-4");
            }
        }