Simple slide panel with jquery
Hello friends. Here is the code for a simple slide panel
Html and Css
The javascript
The example
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
Simple slide panel with jquery
Reviewed by JS Pixels
on
June 20, 2011
Rating:
These are all some very nice and easy to read / understand snippets.
ReplyDelete