Total Page Views :- webs counters

JQuery slideUp

JQuery slideUp method is used to hide a image or div with slide effect.

( slideUp() )

<script> $(document).ready(function(){ $('.button1').click(function(){ $('.box1').slideUp(); }) // for first div with default speed $('.button2').click(function(){ $('.box2').slideUp('slow'); }) // for second div with slow speed $('.button3').click(function(){ $('.box3').slideUp('fast'); }) // for third div with fast speed $('.button4').click(function(){ $('.box4').slideUp(1000); }) // for Forth div with 1 second speed }) </script>

Click on the button below

Collapse Box (Click Here) Div 1
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
Collapse Box (Click Here)Div 2
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
Collapse Box (Click Here) Div 3
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
Collapse Box (Click Here) Div 4
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

slideDown Method

JQuery slideDown() method is used to show a image or div with slide effect.

( slideDown() )

<script> $(document).ready(function(){ $('.button1').click(function(){ $('.box1').slideDown(); }) // for first div with default speed $('.button2').click(function(){ $('.box2').slideDown('slow'); }) // for second div with slow speed $('.button3').click(function(){ $('.box3').slideDown('fast'); }) // for third div with fast speed $('.button4').click(function(){ $('.box4').slideDown(1000); }) // for Forth div with 1 second speed }) </script>

Click on the button below

Collapse Box (Click Here) Div 1
Collapse Box (Click Here)Div 2
Collapse Box (Click Here) Div 3
Collapse Box (Click Here) Div 4

slideToggle Method

JQuery slideToogle() method can give both slideUp and slideDown effects alternately.

( slideDown() )

<script> $(document).ready(function(){ $('.button1').click(function(){ $('.box1').slideToggle(); }) // for first div with default speed $('.button2').click(function(){ $('.box2').slideToggle('slow'); }) // for second div with slow speed $('.button3').click(function(){ $('.box3').slideToggle('fast'); }) // for third div with fast speed $('.button4').click(function(){ $('.box4').slideToggle(1000); }) // for Forth div with 1 second speed }) </script>

Click on the button below

Collapse Box (Click Here) Div 1
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
Collapse Box (Click Here)Div 2
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
Collapse Box (Click Here) Div 3
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
Collapse Box (Click Here) Div 4
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