help needed with a simple toggle script.
I'm very new with jquery and js scripting in general.
I am trying to create a very simple script which would do 2 things:
- Toggle the css display property of a class to hidden/visible
- Change the text link to Show/Hide
This is what I currently have:
in the <head>
-
<script type="text/javascript">
$(document).ready(function() {
$(".togglebutton").toggle(function() {
$(this).html("Show");
$(".togglediv").css({"visibility":"visible"});
}, function() {
$(this).html("Hide");
$(".togglediv").css({"visibility":"hidden"});
});
});
In the <body>
-
<span class="togglebutton"><a href="#">Hide</a></span>
The problem is that the script needs an extra click on the "Hide" text link to be activated. This changes the order of Hide/Show and messes up with the semantics of the interface.
I know that I can (and I temporarily did) swap the Show/Hide instances so as to make sense but can somebody tell me why it is happening and what I should do to prevent this behaviour?