Post
Ask Question

Jquery Slide-- SlideToggle

  1. <html>  
  2.   
  3. <head>  
  4.     <script type="text/javascript" src="jquery.js"></script>  
  5.     <script type="text/javascript">  
  6.         $(document).ready(function()   
  7.         {  
  8.             $(".flip").click(function()   
  9.             {  
  10.                 $(".panel").slideToggle("slow");  
  11.             });  
  12.         });  
  13.     </script>  
  14.     <style type="text/css">  
  15.         div.panel,  
  16.         p.flip   
  17.         {  
  18.             margin: 0px;  
  19.             padding: 5px;  
  20.             text-align: center;  
  21.             background: #e5eecc;  
  22.             border: solid 1px #c3c3c3;  
  23.         }  
  24.           
  25.         div.panel   
  26.         {  
  27.             height: 120px;  
  28.             display: none;  
  29.         }  
  30.     </style>  
  31. </head>  
  32.   
  33. <body>  
  34.     <div class="panel">  
  35.         <p>this post is to define the slide UP process</p>  
  36.         <p>in the slide define it shows the JQuery slide methods</p>  
  37.     </div>  
  38.     <p class="flip">Show/Hide panel</p>  
  39. </body>  
  40.   
  41. </Html>