The effect of the following figure, we did not do landscaping, you can download after the art to make their own desired effect.
First we define some CSS
| The code is as follows | Copy Code |
| <style type= "Text/css" > p{margin:0;padding:0;} . Cc{width:200px;height:200px;float:left;background: #dedede;} P{width:200px;height:20px;text-align:center;background: #CCC; float:left;} #box {overflow:hidden;width:410px;} </style> |
|
Referring to the jquery file, simply wrote a few lines of telescopic code as follows
| code is as follows | copy code |
| <script src = "Jquery-1.7.2.min.js" type= "Text/javascript" ></SCRIPT> <script type= "Text/javascript" $ ( function () { $ (". CC"). Animate ({"height": "0"}) $ ("#box P"). Click (function () { var ind=$ (". P"). index (this); $ (". CC"). Animate ({"height": "0"}). EQ (Ind). Animate ({"Height": "200px"}); }) }) </script> <body> |
|
Here we have the. CC ($ (". CC") defined in CSS. Animate ({"height": "0"}) file must have the same name as jquery, and Id=box is also used in jquery ($ ("#box p"). Click ( function () {) to modify the ID and style name at the same time you need to modify the places I listed.
<!--Add the following code to <body> and </body>;
| The code is as follows | Copy Code |
| <div id= "box" > <div style= "Float:left; width:200px; " > <p class= "P" > click 1 show what </p> <div id= "box_1" class= "CC" >1</div> </div> <div style= "float:left;width:200px;" > <p class= "P" > click 2 Show What </p> <div id= "Box_2" class= "CC" >2</div> </div> </div> |
|
So we can easily and quickly implement DIV display hidden effect oh.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
