CODEWITHSUNDEEP
jquery
Bastu
Bastu

Reputation: 96

Toggle Hide/Show sidebar jQuery not working

i can't figure out why the toggle isn't working in my code. This should hide the sidebar when i click on the navbutton, but it doesn't. Thank you very much for reading my question.

JavaScript

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

HTML/PHP (Look only between the < button > < /button> tag.

                <div id="header">

                <button type="button" class="btn btn-default btn-lg"id="navbutton">
                <span class="glyphicon glyphicon-align-justify"></span>
                </button>

                <div id="title">
                <a href="home.php" style="color:#fafafa;text-decoration:none;">Trigger</div>
                <div id="MenuInHeader"><ul><li><a href="logout.php"><i class="fa fa-external-link fa-fw"></i> Logout</a></li></ul></div>
            </div>

CSS

#sidebar {
position:absolute;
left:0;
width:200px;
height:100%;
background:#5e5e5e;
opacity:0.9;
}

Upvotes: 1

Views: 4905

Answers (2)

Shakesy
Shakesy

Reputation: 335

Here's a simple hide/show sidebar script for you to get the idea:

<div id="sidebar" style="height:600px; width:100px; right:-75px; position:absolute; background-color:black;">
//sidebar styling
</div>




<script>
$('#sidebar').hover(function() {
$('#sidebar').stop().animate({'right' : '0px'}, 250);
}, function() {
$('#sidebar').stop().animate({'right' : '-75px'}, 350); 
});

Here is a working example: http://jsfiddle.net/XTDHx/

Upvotes: 0

Kiranramchandran
Kiranramchandran

Reputation: 2094

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

Upvotes: 1

Related Questions