jQuery Cookie on slideToggle
I've a navigation bar, and a hidden sub navigation bar. When I click on
Page2 the hidden bar shows up (with slideToggle). So far so good. Now the
client wants, when the sub navigation bar is shown, and he clicks on Page3
or Page1 again that the sub navigation bar stays shown until he click on
Page2 again. I know that I need cookies for this. I've tried to make it by
myself but with no effort, because this is the first time I work with JS
cookies. I'm sure somebody knows how to do this jQuery script
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Page1</a></li>
<li id="item"><a href="#">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
</ul>
</nav>
<br /><br />
<ul id="sub-nav">
<li><a href="#">Subpage1</a></li>
<li><a href="#">Subpage2</a></li>
<li><a href="#">Subpage3</a></li>
</ul>
</body>
CSS:
<style type="text/css">
*{margin: 0; padding: 0;}
ul{list-style:none; font: 20px; float: left;}
ul li{float: left; margin-right: 20px;}
#sub-nav{font:14px; display: none;}
</style>
jQuery:
<script type="text/javascript">
$(document).ready(function(){
$('#item').click(function(){
$('#sub-nav').slideToggle('fast');
});
});
</script>
No comments:
Post a Comment