How to use Slide panel method in JQuery

This article describe about jQuary slide panel method.
  • 2207

Slide panel method in jQuery

$(".panel") method

In this method we hide a paragraph and show it.

Slider panel is worked show and hide in jquery.

Example

<!DOCTYPE html>

<html>

<head>

 

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function ()

{

        $(".flip").click(function ()

 {

            $(".panel").slideToggle("slow");

        });

    });

</script>

 

<style type="text/css">

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:no;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<div class="panel">

<p>This is a JQuery</p>

<p>We study in .netheaven.</p>

</div>

 

<p class="flip">Show/Hide Panel</p>

 

</body>

</html>

 

Output

 

 op1.jpg

After click button

 op2.jpg

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.