jQuery: toggle between hiding and showing a text
Sometimes not all information on a page has to be shown at the same time. In this tutorial I'm going to show you how to hide paragraphs and display them when someone clicks on a link. We'll use HTML and jQuery.
Demo
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Including jQuery in the HTML document
If you want to work with jQuery, you have to include it in the <head> tag of your document (I recommend to use the newest version).
HTML Code
Now we need to add the paragraphs and the link. You can add as many paragraphs as you want. Our jQuery function will only hide and show the first paragraph after the link.
jQuery Code
$(document).ready(function(){
$(".toggle-example").html("Show");
$(".toggle-example").next("p").hide();
$(".toggle-example").toggle(function(){
$(".toggle-example").next("p").show("slow");
$(".toggle-example").html("Hide");
}, function(){
$(".toggle-example").next("p").hide("slow");
$(".toggle-example").html("Show");
});
});
Explanation
First of all we need document.ready. We want our code to start working as soon as the whole document has been loaded, which means that all element have been loaded and are ready for manipulation with jQuery.
$(document).ready();
When the document is loaded we start a function:
$(document).ready(function(){
});
Now we select our HTML link. It is empty so we add text to it using the .html() function.
The text is "Show".
$(document).ready(function(){
$(".toggle-example").html("Show");
});
Now we hide the first paragraph after our link using the .hide().
$(document).ready(function(){
$(".toggle-example").html("Show");
$(".toggle-example").next("p").hide();
});
We add a .toggle() containing two functions to our link.
Here's how .toggle() works in this case: The first function is assigned to the link as long as it hasn't been clicked yet.
When someone clicks on the link the first function takes action. After that the second function is assigned to our link. When the user clicks the link again the second function takes action and the first function is assigned to the link again. This means that our link works like a switch.
$(document).ready(function(){
$(".toggle-example").html("Show");
$(".toggle-example").next("p").hide();
$(".toggle-example").toggle(function(){
}, function(){
});
});
Let's finish our functions. The first function should show our paragraph. In order to do this we use .show().
We also want to add a nice animation to the .show() function. We simply add the transition speed between the brackets: .show("slow"). We also change the text of our link to "Hide".
$(document).ready(function(){
$(".toggle-example").html("Show");
$(".toggle-example").next("p").hide();
$(".toggle-example").toggle(function(){
$(".toggle-example").next("p").show("slow");
$(".toggle-example").html("Hide");
}, function(){
});
});
In the second function we do the opposite. We hide the paragraph and change the text of our link to "Show".
$(document).ready(function(){
$(".toggle-example").html("Show");
$(".toggle-example").next("p").hide();
$(".toggle-example").toggle(function(){
$(".toggle-example").next("p").show("slow");
$(".toggle-example").html("Hide");
}, function(){
$(".toggle-example").next("p").hide("slow");
$(".toggle-example").html("Show");
});
});
