I have this bar created that slides open when clicked. However, i only want it to open when + is clicked. i have the + hyperlinked, but i’m not sure how to make the the slider only respond to the + and bring back the sidebar to normal (right now it is shifted underneath the content div. please help.
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div id="menu-expand">
<a href="#" class="closed"><span>+</span></a>
</div>
</div>
<div id="content"></div>
</div>
<!-- Scripts -->
<script>
$(function() {
$('#nav').click(function() {
var leftMargin = ($(this).css('margin-left') === '0px') ? '-150px' : '0px';
$(this).animate({ 'margin-left' : leftMargin }, 500);
});
});
</script>
</body>
</html>
The click event ‘bubbles’ up through the DOM, firing on every parent element unless you use
ev.stopPropagation():