Remember Toggle state with JQuery after refresh?

I got a small script wich toggles my nav. But im using the nav in more pages. I want jquery to remember the toggle(show/hide) state so i can use it when navigating.

$(document).ready(function(){
$('ul.second').show();
$('ul.third').hide();
$('ul.first').show();
$('ul.first li.first a').click(function(){
    //$('ul.second').slideToggle("");
    $('ul.third').slideToggle("");
    });
});

ps: I know my english is not very good :))

Answers:

Answer

You could use either use cookie management or localStorage to store this info across your session. LocalStorage only works with html5 though.

Here's a good article on a plugin that features both, so you don't need to detect yourself if the browser is capable of localStorage or not:

http://upstatement.com/blog/2012/01/jquery-local-storage-done-right-and-easy/

Answer

You can also add a hash to the url and detect the hash after page refresh.

More details on hash here

http://benalman.com/projects/jquery-hashchange-plugin/

https://developer.mozilla.org/en/DOM/window.onhashchange

Answer

you can do it with slide function of jquery just design the panel and flip element to your liking with css like this

<style>
.flip {
position:relative;
background-image:url("mybutton");
}

#panel {
background-image:("rabbitimage");
}
</style>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $(".flip").click(function(){
    $("#panel").slideToggle("slow");

  });
});
</script>


</head>
<body>

<div class="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

</body>
</html>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.