Web Forward > jQuery hide and show example > Basic tutorial of hiding content on a page load and various methods of dispaying it based on a click event

This link opens the first paragraph.
This link opens fast the second paragraph
This link opens paragraph three in 3 seconds.
This link slide down to open paragraph four in 4 seconds.

Paragraph No. 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed urna eros, vel pulvinar nibh. Phasellus mi nisl, eleifend ut semper et, lobortis sed magna. Mauris a velit nunc, at eleifend leo. Proin ullamcorper fringilla diam, ac fringilla metus accumsan sed. Mauris ut erat id mauris elementum ullamcorper sed eu justo. Sed ut sodales tortor.

Paragraph No. 2. Hasellus sed arcu elit. Sed vel condimentum arcu. Nulla facilisi. Maecenas ut ante sit amet dolor tincidunt viverra et vitae risus. Integer volutpat enim in mi ullamcorper eget tristique purus pellentesque. Vestibulum feugiat lobortis sapien, non varius tellus cursus blandit. In velit tellus, venenatis adipiscing bibendum ac, dignissim et dolor.

$(document).ready(function()
		{
			$('p#ParagraphOne').hide();
			$('p#ParagraphTwo').hide();
			$('p#ParagraphThree').hide();
			$('p#ParagraphFour').hide();

$('a#ParagraphAnchorOne').click(function()
				{
					$('p#ParagraphOne').show()
				});

$('a#ParagraphAnchorTwo').click(function()
					{
						$('p#ParagraphTwo').show('fast')
				});

$('a#ParagraphAnchorThree').click(function()
				{
					$('p#ParagraphThree').show(3000)
				});

$('a#ParagraphAnchorFour').click(function()
				{
					$('p#ParagraphFour').slideDown(4000)
		});

});

</script>

<a href="#" id="ParagraphAnchorOne">This link opens the first paragraph.</a> 
<a href="#" id="ParagraphAnchorTwo">This link opens fast the second paragraph</a> 
<a href="#" id="ParagraphAnchorThree">This link opens paragraph three in 3 seconds.</a> 
<a href="#" id="ParagraphAnchorFour">This link slide down to open paragraph four in 4 seconds.</a> 
 Paragraph No. 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed urna eros, vel pulvinar nibh. Phasellus mi nisl, eleifend ut semper et, lobortis sed magna. Mauris a velit nunc, at eleifend leo. Proin ullamcorper fringilla diam, ac fringilla metus accumsan sed. Mauris ut erat id mauris elementum ullamcorper sed eu justo. Sed ut sodales tortor.
 Paragraph No. 2. Hasellus sed arcu elit. Sed vel condimentum arcu. Nulla facilisi. Maecenas ut ante sit amet dolor tincidunt viverra et vitae risus. Integer volutpat enim in mi ullamcorper eget tristique purus pellentesque. Vestibulum feugiat lobortis sapien, non varius tellus cursus blandit. In velit tellus, venenatis adipiscing bibendum ac, dignissim et dolor.
 Paragraph No. 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed urna eros, vel pulvinar nibh. Phasellus mi nisl, eleifend ut semper et, lobortis sed magna. Mauris a velit nunc, at eleifend leo. Proin ullamcorper fringilla diam, ac fringilla metus accumsan sed. Mauris ut erat id mauris elementum ullamcorper sed eu justo. Sed ut sodales tortor.
 Paragraph No. 2. Hasellus sed arcu elit. Sed vel condimentum arcu. Nulla facilisi. Maecenas ut ante sit amet dolor tincidunt viverra et vitae risus. Integer volutpat enim in mi ullamcorper eget tristique purus pellentesque. Vestibulum feugiat lobortis sapien, non varius tellus cursus blandit. In velit tellus, venenatis adipiscing bibendum ac, dignissim et dolor.

How Much?
Custom website packages
start from $1,000 CAD.

How Long?
The web design and development process takes
2 to 8 weeks, depending on website's complexity.

Get in Touch:
Email: info@webforward.ca
Call me: 647.629.2876