jQuery: toggle()Learn how to toggle (show /hide) multiple elements individually using jQuery.
jQuery
Tutorial Details
Difficulty level : Begginer
This article will give you the basics on how to toggle (show / hide) multiple elements individually using jQuery. It's an easy task to show and hide a single element using jQuery. But when it comes to perform the same task for multiple elements using jQuery it becomes a little complicated unless you know the basics of jquery and know how to use css class and id properties. Before putting your hands in jQuery you should have complete knowledge of css selectors.That's what we are goind to do.
Difference between class and id :
CLASSNAME: The main difference between class and id is that we can use a particular class name ( .className ) for many elements.
IDNAME: But in case of id ( #idName ) we can use a particular idname for just one element only and hence we cannot use it again for other elements
CLASSNAME: The main difference between class and id is that we can use a particular class name ( .className ) for many elements.
IDNAME: But in case of id ( #idName ) we can use a particular idname for just one element only and hence we cannot use it again for other elements
<html>
<head>
<script src="C:\jquery.js"></script>
<script type="text/javascript">
</head>
<body>
<p class="para">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<br/>
<p class="para">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
<br/>
<p class="para">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p>
<br/>
<p class="para">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</p>
</body>
</html>
<head>
<script src="C:\jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.para').hide();
$('<input type="button" value="Read More..."
class="continue">').insertBefore('.para');
$('.continue').click(function(){
$(this).next().toggle('slow');
});
});
</script></head>
<body>
<p class="para">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<br/>
<p class="para">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
<br/>
<p class="para">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p>
<br/>
<p class="para">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</p>
</body>
</html>
