Home » » Simple slide panel with jquery

Simple slide panel with jquery

Written By Unknown on Senin, 20 Juni 2011 | 03.15

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
Share this article :

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Kumpulan Kata Broadcast Blackberry - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger