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;
  <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. 

The javascript

 <script src="


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

1 comment:

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


Altaf Web. Powered by Blogger.