|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(".slidingDiv").slideToggle(); }); }); </script> <button class="show_hide" value="Show/hide">RESIZE</button> <div class="slidingDiv"> Fill this space with really interesting content. <a href="#" class="show_hide">hide</a> </div> <div class="slidingDiv2"> Fill this space with really interesting content. <a href="#" class="show_hide">hide</a> </div> <style type="text/css"> .slidingDiv { height:300px; width: 60%; background-color: #99CCFF; padding:20px; margin-top:10px; border-bottom:5px solid #3399FF; } .slidingDiv2 { height:300px; width: 60%; background-color: #99CCFF; padding:20px; margin-top:10px; border-bottom:5px solid #3399FF; } .show_hide { display:none; } </style> |
