Toggle div element using jQuery

. Tuesday, June 10, 2008
  • Agregar a Technorati
  • Agregar a Del.icio.us
  • Agregar a DiggIt!
  • Agregar a Yahoo!
  • Agregar a Google
  • Agregar a Meneame
  • Agregar a Furl
  • Agregar a Reddit
  • Agregar a Magnolia
  • Agregar a Blinklist
  • Agregar a Blogmarks

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>

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();
});
});

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>

12 comments:

Anonymous said...

i was looking for a way to do it without messing my html code. your code served it well. thanks

Anonymous said...

thanks for the tutorial.

is it possible to toggle the element slowly with a fading effect?

Fahad Ibnay Heylaal said...

use this for a sliding effect:

$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle('slow');
});
});

Anonymous said...

How we we used this with multiple toggles DIV's?

I'm trying to expand more than 3 DIVs.

any clues..?

Anonymous said...

Maybe use the find function? Example: $('#divparent').find('divchildren').toggle();

Anonymous said...

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

Nik's said...

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

Scott said...

How would you initially hide the layer on load, then on click display?

Anonymous said...

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;
});
});

Anonymous said...

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!

Felicity said...

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.

Dan K. said...

Very nice tutorial! I've added this to my code lib. Thanks for the great tutorial.