jQuery Slide

jQuery slideUp() and slideDown() Methods

The jQuery slideUp() and slideDown() effects are used to slideup or slidedown to selected html element.

Syntax of slideDown:

$(selector).slideDown(speed);  

Syntax of slideUp:

$(selector).slideUp(speed);

Example of Code

<style>
    .example-jquery-slidedown{
    margin-left: 30px;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
          $(".example-jquery-slideup").click(function(){
            $(".example-jquery-slideup-slidedown-paragraph").slideUp();
        });
          $(".example-jquery-slidedown").click(function(){
            $(".example-jquery-slideup-slidedown-paragraph").slideDown();
        });
    });
</script>
<button type="button" class="example-jquery-slideup">click here for Slide Up </button> 
<button type="button" class="example-jquery-slidedown">click here for Slide Down </button>
<p class="example-jquery-slideup-slidedown-paragraph">Slide Up and Slide Down to Paragraph</p>

Output

jQuery slideToggle() method

The jQuery slideToggle() effect is used to toggle between slideup or slidedown to selected html element.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".example-jquery-slideToggle").click(function(){
            $(".example-jquery-slideToggle-paragraph").slideToggle();
        });
    });
</script>
<button type="button" class="example-jquery-slideToggle">Slide Toggle Paragraphs</button> 
<p class="example-jquery-slideToggle-paragraph">This is a paragraph.</p> 

Output