JQuery Slide Functions

Written By: Avinash Malhotra

Jquery Slide functions are used to show and hide an element with slide effect. This will decrease and increase height of element with transition.

Jquery Slide Functions

  1. Slide Up
  2. Slide Down
  3. Slide Toggle

JQuery slideUp

JQuery slideUp function is used to show or hide an html element with slide effect and transitions. The default duration is 400. But we can change duration using "slow", "fast" or n milliseconds.


<script>
    $(document).ready(function(){
        $('.button1').click(function(){
            $('.exp1).slideUp();           
        })                                   
    }) 
</script>	
			

<script>
    $(document).ready(function(){
        $('.button2').click(function(){
            $('.exp2).slideUp("fast");           
        })                                   
    }) 
</script>	
			

<script>
    $(document).ready(function(){
        $('.button3').click(function(){
            $('.exp3).slideUp("slow");           
        })                                   
    }) 
</script>	
			

<script>
    $(document).ready(function(){
        $('.button4').click(function(){
            $('.exp4).slideUp(1000);           
        })                                   
    }) 
</script>

Jquery slideDown

JQuery slideDown() functions is used to show an html element with slide effect and transition. The default transition time is 400, but we can change transition timing in parameters.


<script>
    $(document).ready(function(){
        $('.button5').click(function(){
            $('.exp5).slideDown();           
        })                                   
    }) 
</script>	
			

<script>
    $(document).ready(function(){
        $('.button6').click(function(){
            $('.exp6).slideDown("slow");           
        })                                   
    }) 
</script>	
			

<script>
    $(document).ready(function(){
        $('.button7').click(function(){
            $('.exp7).slideDown("fast");           
        })                                   
    }) 
</script>	
			

<script>
    $(document).ready(function(){
        $('.button8').click(function(){
            $('.exp8).slideDown(1000);           
        })                                   
    }) 
</script>

Jquery slideToggle

JQuery slideToogle function is used to slideup or slidedown and html element with transition. If element is hidden, it will slide down, and if it is shown, it will slideup. 


<script>
$(document).ready(function(){
    $('.button9').click(function(){
        $('.box9').slideToggle();           
    })            
}) 
</script>	
			

<script>
$(document).ready(function(){
    $('.button10').click(function(){
        $('.box10').slideToggle('slow');           
    })            
}) 
</script>	
			

<script>
$(document).ready(function(){
    $('.button11').click(function(){
        $('.box11').slideToggle('fast');           
    })            
}) 
</script>	
			

<script>
$(document).ready(function(){
    $('.button12').click(function(){
        $('.box12').slideToggle(1000);           
    })            
}) 
</script>