jQuery toggle left sidebar menu with content

css, html, jquery

Solution

This will work (Example)

$('.navbar').on('click', function(){ $('#sidebar, #main-content').toggle(); });

Once the element is hidden, you don't need to remove the margin or any other style of that element because, it's already hidden.

Update : Using `jQuery UI`'s `slide` (Example)

$('.navbar').on('click', function(){
    $('#sidebar').toggle('slide', { direction: 'left' }, 1000);
    $('#main-content').animate({
        'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px'
    }, 1000);
});

Update : Also you may try this (Example), using `.animate()` no `jQuery UI`

$('.navbar').on('click', function(){
    if( $('#sidebar').is(':visible') ) {
        $('#sidebar').animate({ 'width': '0px' }, 'slow', function(){
            $('#sidebar').hide();
        });
        $('#main-content').animate({ 'margin-left': '0px' }, 'slow');
    }
    else {
        $('#sidebar').show();
        $('#sidebar').animate({ 'width': '210px' }, 'slow');
        $('#main-content').animate({ 'margin-left': '210px' }, 'slow');
    }
});

Problem

I have a sidebar which is open by default, i want to be able to click a menu icon and my sidebar slides in to show more of the content: ``` #sidebar { width: 210px; height: 100%; position: fixed; background: #2a3542; } #main-content { margin-left: 210px; } <div class="navbar">toggle icon in here</div> <div id="sidebar">sidebar content here</div> <section id="main-content">main page content here</section> ``` I want to be able to toggle the menu, but then im guessing i would have to add and remove the margin-left on to the #main-content? Any help would be great Thanks

Original source