Simple slide panel with jquery

Hello friends. Here is the code for a simple slide panel

Html and Css

  <style type="text/css">
  .box {
      width: 320px;
      text-align: justify;
      background-color: #eeeeee;
      overflow: hidden;
      font-size: 12px;
      color: #333333;
      line-height: 18px;
      padding: 0px 10px 4px;
      font-family: Arial, Helvetica, sans-serif;
  }
  .clik {
      font-size: 12px;
      text-decoration: none;
      font-weight: bold;
      color: #ffffff;
      font-family: Arial, Helvetica, sans-serif;
      width: 340px;
      background-color: #4D90FE;
      text-align: center;
      display: block;
      line-height: 33px;
  }
  </style>
  
  <a class="clik" href="javascript:;" >Click Here</a>
  
  <div class="box" id="addthis" style="display: none;"> 
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the 
    industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and 
    scrambled it to make a type specimen book. It has 
    survived not only five centuries, but also the leap
    into typesetting, remaining essentially unchanged. 
  </div>


The javascript

 <script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>

  <script>
      $(".clik").click(function(){
      $('#addthis').slideToggle(500);
  });
  </script>


The example
 
Click Here
Simple slide panel with jquery Simple slide panel with jquery Reviewed by JS Pixels on June 20, 2011 Rating: 5

1 comment:

  1. These are all some very nice and easy to read / understand snippets.

    ReplyDelete

Altaf Web. Powered by Blogger.