Simple Slider panel using jquery

Simple slider pane using jquery
15.4 KiB
222 Downloads
Details

The following is the code sample for creating beautiful simple sliding pane or panel using in jquery. you can use the sliding pane for login form and other information

JQuery:
1: Create swap.js file with js folder and paste the below code.

// JavaScript Document
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
$(document).ready(function(){
$(".flip1").click(function(){
    $(".panel1").slideToggle("slow");
  });
});

HTML Page:

2. Create a htnml page and then we need add to reference the JQuery library. Add the reference in the head section.

<html>
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/swap.js"></script>
 
    <style type="text/css">
    div.panel,p.flip
    {
    margin:0px;
    padding:5px;
    text-align:center;
    background:#800000;
	color:#ffffff;
    border:solid 1px #c3c3c3;
    }
    div.panel
    {
    height:120px;
    display:none;
    }
    </style>
 
    <style type="text/css">
    div.panel1,p.flip1
    {
    margin:0px;
    padding:5px;
    text-align:center;
    background:#800000;
    color:#ffffff;
    border:solid 1px #c3c3c3;
    }
 div.panel1 a, div.panel a  
{
color:#66FF00;
}
    div.panel1
    {
    height:120px;
    display:none;
    }
    </style>
  </head>
<body> 
   <div class="panel">
      <p>You can learn c# programming <a href="http://www.authorcode.com">here</a> </p>
      <p>you can find free resources, code samples, project source code.</p>
   </div>
   <p class="flip">Click to Show/Hide Panel</p>
   <div class="panel1">
      <p>You can learn c# programming <a href="www.authorcode.com">here</a></p>
      <p>you can find free resources, code samples, project source code.</p>
   </div>     
   <p class="flip1">Click to Show/Hide Panel</p>
 </body>
</html>

Both Swap.js and Jquery.js attch with Post. If you face any problem then just download these files and Test the code.
You can download Jquery code Files from the top.
I hope you like the above simple sliding pane.

Author: Pavan

I am asp.net developer have good knowledge of Asp.net ver 05,08,10 and good hand in sql server.Proficient in Object Oriented Programming and javascript, jQuery. Achievements - Integrate Spotfire, appnexus API ASP.net with sql server. Hobbies - Blogging ,Games, Movies ,Teaching,Keeping myself update with new technologies