In Jquery, Hiding and showing the content is much easier than JavaScript. You can show or hide the content in some magical ways which I have used below like tootgle or delay.
Here is an example to show or hide data in Jquery.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<input type="button" id="toggle" value="toggle()">
<input type="button" id="hide" value="hide()">
<input type="button" id="show" value="show()">
<input type="button" id="delay_show" value="show(1000)">
<input type="button" id="delay_hide" value="hide(1000)">
<input type="button" id="delay_toggle" value="toggle(1000)">
<p>Paragraph text</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$('#toggle').click(function(){
$('p').toggle();
});
$('#hide').click(function(){
$('p').hide();
});
$('#show').click(function(){
$('p').show();
});
$('#delay_toggle').click(function(){
$('p').toggle(1000);
});
$('#delay_show').click(function(){
$('p').show(1000);
});
$('#delay_hide').click(function(){
$('p').hide(1000);
});
</script>
|