How to Toggle (Hide/Show) Sidebar Div Using Jquery

How to toggle (hide / show) sidebar div using jQuery

$('button').toggle(
function() {
    $('#B').css('left', '0')
}, function() {
    $('#B').css('left', '200px')
})

Check working example at http://jsfiddle.net/hThGb/1/

You can also see any animated version at http://jsfiddle.net/hThGb/2/

How do I hide and show sidebar using jquery and css?

Your works fine for me, check your Jquery link. It seems that it is not loaded properly. I used a cdn down and it is working just check it.

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title>
  <style>
#sidebar {background:#17153e;color:#c8c5d3;position:fixed;height:100%;width:250px;overflow:hidden;left:0;margin:0;}
#sidebar.hide-sidebar {    left: -250px;}
#wrapper {margin:0 0 0 250px;}    #wrapper.hide-sidebar {    margin-left: 0;}  </style></head>
<body>    <div id="sidebar">        <img src="img/MyPicture.png" alt="MyPicture" class="headshot"/>        <span style="font-weight:bold">MyName</span>        <ul class="menu">            <li class="active"><a href="#">Home</a></li>            <li><a href="#">About</a></li>            <li><a href="#">Projects</a></li>            <li><a href="#">Contact</a></li>        </ul>    </div>    <div id="wrapper">        <div id="main">            <div>                <button id="sidebarToggle">Toggle Menu</button>            </div>            <h1>My Page</h1>        </div>        <div id="footer">            <p>This is the footer</p>            © 2019 My Profile        </div>    </div>    <script  src="https://code.jquery.com/jquery-3.3.1.min.js"  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="  crossorigin="anonymous"></script>  <script> var $sidebarAndWrapper = $("#sidebar,#wrapper");
$("#sidebarToggle").click(function () {    $sidebarAndWrapper.toggleClass("hide-sidebar");});  </script>

</body>
</html>

Toggle Hide/Show sidebar jQuery not working

Add this div to your mark up

<div id="sidebar"></div>

And wrap your js in document.ready

try this

$(document).ready(function(){

  $('#navbutton').click(function(e) {
    e.preventDefault();
         $('#sidebar').toggle('slow');
   });

});

DEMO HERE

How to toggle sidebar div using jQuery

Try:

(function() {
    var state = 0;
    var toggle = function() {
        if (state === 0) {
            $('#B').css('left', '0');
            state = 1;
        } else {
            $('#B').css('left', '200px');
            state = 0;
        }
    }

    $('button').click(toggle);
}());

jQuery plugin for toggle show/hide sidebar

I have just created this jsfiddle for you. I tried to include as much of your code as I could but I think it will be of help to you if you have a version for trying things out.

As you can see, you have to use jQuerys animate function to really animate the div sliding in. Referencing your example, there is also a github source given, so do have a look there and see how he did the animation.

$('.sidebar').animate({
    marginLeft: "0px",
    opacity: "1"
  }, 1000);

Here is the complete fiddle.

http://jsfiddle.net/patrickhaede/n9MLk/

I also included kind of a list view for you to display content of the slider. I hope this helps you.

Hiding and showing sidebar div

The toggle() functionality you're trying to use has now been deprecated and removed from the latest versions of jQuery. To replicate it you can use the click() event with a simple ternary expression. Try this:

$('button').click(function() {
    var $el = $('#sidebarright');
    $el.animate({
        left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
    });
});

Also note that the page you link to on your website does not contain a reference to jQuery. Here's how you should do that, along with a full implementation of the above code:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
        $(function() {
            $('button').toggle(function() {
                var $el = $('#sidebarright');
                $el.animate({
                    left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
                });
            });
        });
    </script>
</head>

Also note that you can simplify this by using CSS transitions only and toggling a class:

#sidebarright {
    /* UI styling rules here */
    left: 0;
    transition: left 0.5s
}
#sidebarright.open {
    left: 200;
}

$('button').click(function() {
    $('#sidebarright').toggleClass('open');
});

How to Toggle (Hide/Show) Sidebar Div Using Jquery