Sidebar hide and show with Bootstrap and Jquery?

Question

Guys I want to create a sidebar hiding and showing using bootstrap, but my code isn't working..

Please help me...

My code HTML is:

<nav role="nav" class="navbar">
    <a href="" class="menu">button</a>
</nav>

<nav role="nav" class="sidebar">
    sidebar menu
</nav>

<main role="main" class="main-page">
    main content
</main>

This is my CSS code:

.menu {
    display: block !important;
}

.sidebar {
    color: #fff;
    width: 240px;
    height: 100%;
    position: fixed;
    background: #2a3542;
}

.main-page {
    color: #000;
    margin-left: 240px;
    position :relative;
}

And this is my jquery code:

<script>
    $(function () {
        $('.menu').on('click', function () {
            if ($('.sidebar').is(':visible')) {
                $('.sidebar').animate({'width': '0px'}, 'slow', function () {
                    $('.sidebar').hide();
                });
                $('.main-page').animate({'padding-left': '0px'}, 'slow');
            } else {
                $('.sidebar').show();
                $('.sidebar').animate({'width': '240px'}, 'slow');
                $('.main-page').animate({'padding-left': '240px'}, 'slow');
            }
        });
    });
</script>

I'm using bootstrp CDN: jquery-3.2.1.slim.min.js / popper.min.js / bootstrap.min.js

score 1 · Accepted Answer · answered Nov 15 '17 at 17:47

Im not sure why is not working. Try this one.

Change/Add the following CSS:

.sidebar {
    color: #fff;
    width: 240px;
    height: 100%;
    position: fixed;
    background: #2a3542;
    left:0px;
    transition:0.3s all ease-in-out;
}

.sidebar.close {
    left: -240px;
    transition:0.3s all ease-in-out;
}

In your script Change/Add the following:

$('.menu').on('click', function () {
  $('.sidebar').toggleClass('close');
});

Mario Nikolaus · Answer 2 · 2017-11-15T17:25:55.513

You are using slim version of jQuery library which does not contain DOM animation capabilities. That is why your code is not working...

See more on this link below: https://stackoverflow.com/a/35424465/704661

EDIT:

You had several bugs in your code:

First is that your anchor has empty href attribute which causes page to reload on every click.

Secondly you had margin and padding on main content which was causing multiple gap between sidebar and content.

HTML

<nav role="nav" class="navbar">
    <a href="#" class="menu">button</a>
</nav>

<nav role="nav" class="sidebar">
    sidebar menu
</nav>

<main role="main" class="main-page">
    main content
</main>

CSS

.menu {
                display: block !important;
            }

            .sidebar {
                color: #fff;
                width: 240px;
                height: 100%;
                position: fixed;
                background: #2a3542;
            }

            .main-page {
                color: #000;
                padding-left: 240px;
                position :relative;
            }

Javascript

$(function () {
        $('.menu').on('click', function () {
        if ($('.sidebar').is(':visible')) {
            $('.sidebar').animate({'width': '0px'}, 'slow', function () {
                $('.sidebar').hide();
            });
            $('.main-page').animate({'padding-left': '0px'}, 'slow');
        } else {
            $('.sidebar').show();
            $('.sidebar').animate({'width': '240px'}, 'slow');
            $('.main-page').animate({'padding-left': '240px'}, 'slow');
        }
        });
    });

here is working fiddle example

https://codepen.io/mnikolaus/pen/mqByqK

Even using the full version of jquery the sidebar is not hiding. Is the bootstrap CSS interfering? — Ilenon, Nov 15 '17 at 17:06
@user8811593 check edited answer now, I found a solution for you — Mario Nikolaus, Nov 15 '17 at 17:26

score -2 · Answer 3 · answered Nov 15 '17 at 15:59

-2

Try not to use jquery.slim. It goes well with min.js

https://code.jquery.com/jquery-3.2.1.min.js

Check the jsfiddle

answered Nov 15 '17 at 15:59

zagzter

229
1
11

Even using the full version of jquery the sidebar is not hiding. Is the bootstrap CSS interfering? – Ilenon Nov 15 '17 at 17:06

Sidebar hide and show with Bootstrap and Jquery?

3 Answers3