What is Toggling?
Basically a show/hide feature for your webpage elements. For example, you may have a login box in your webpage, and you want your visitors to click on a button for showing or hiding the element.
This tutorial will show you how to implement a simple toggle effect in your webpage using jQuery.
As always, we will require some HTML content first
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
<br />
<div id="textBox">This text will be toggled</div>
jQuery code
This is the code that makes the 'textBox' element toggle
$("#textBox").toggle();
But we want to toggle the element only when you click on 'Toggle my text' link. And this code will make it happen:
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
Final Code:
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
</html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
</html>
12 comments:
i was looking for a way to do it without messing my html code. your code served it well. thanks
thanks for the tutorial.
is it possible to toggle the element slowly with a fading effect?
use this for a sliding effect:
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle('slow');
});
});
How we we used this with multiple toggles DIV's?
I'm trying to expand more than 3 DIVs.
any clues..?
Maybe use the find function? Example: $('#divparent').find('divchildren').toggle();
Hi There!
I have just copied and pasted the code to see if it works, but unfortunately it doesn't...
When i open up the html file in my firefox browser, it finds a javascript error:
$ is not defined on line 10:
$(document).ready(function() {
what does this mean?
regards,
Christina, South Australia
hi Christina
You need to add jQuery script in your file.
Try to add this.
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
Nik's
How would you initially hide the layer on load, then on click display?
Scott:
To hide a layer on load and then reveal the code you can simply add these lines to the js-
$('#textBox').hide();
return false;
Not together though.
The completed code-
$(document).ready(function() {
$("#textBox").hide();
$("#clickMe").click(function() {
$("#textBox").toggle();
return false;
});
});
Hi,
I'm wondering, if there's a way to change the link text. So "Show the Textbox" and if it's open, backwards as "Hide the Textbox".
Thanks!
I don't usually leave comments, but I just wanted to thank you. This code absolutely saved my life and it was wayyy more easy for me to understand, apply to my existing structure, and even build upon a little in the paired-down example you provided than the full out toggling done with Javascript (of which I know zilch) and have been struggling with for the past week. I am so glad I found this and I wish more people posted concepts with just the bare-bones of code.
Very nice tutorial! I've added this to my code lib. Thanks for the great tutorial.
Post a Comment