javascript - add height to parent element of absolute positioned child on its expand -


i have situation: demo

what try achieve push down row of blocks underneath expanded one. @ first tried use jquery , add height of expanded child parent , way push down lower row of blocks achieve this: http://imgur.com/7k0rc21, on hover height() returns 0 , using delays make animation buggy.

here's code:

html:

<div>     <ul class="list">         <li class="list-el">             <div class="el-top">expand 1</div>             <div class="el-bottom">cupcake liquorice cupcake sweet roll ice cream caramels.                  lollipop dragée chupa chups. sugar plum candy jelly-o bonbon gummies caramels.                 jelly icing tiramisu candy chupa chups chocolate bar.                  sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie.                  lollipop sugar plum lollipop jelly lollipop pudding.                  tart jelly-o gummi bears sweet roll gummi bears.                 jelly icing tiramisu candy chupa chups chocolate bar.                  sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie.                  lollipop sugar plum lollipop jelly lollipop pudding.                  tart jelly-o gummi bears sweet roll gummi bears.             </div>         </li>         <li class="list-el">             <div class="el-top">expand 2</div>             <div class="el-bottom">lollipop sugar plum lollipop jelly lollipop pudding.                  tart jelly-o gummi bears sweet roll gummi bears.                 jelly icing tiramisu candy chupa chups chocolate bar.                  sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie.                  lollipop sugar plum lollipop jelly lollipop pudding.                  tart jelly-o gummi bears sweet roll gummi bears.                 jelly icing tiramisu candy chupa chups chocolate bar.                  sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie.                  lollipop sugar plum lollipop jelly lollipop pudding.              </div>         </li>         <li class="list-el">             <div class="el-top">expand 3</div>             <div class="el-bottom">cupcake liquorice cupcake sweet roll ice cream caramels.                  lollipop dragée chupa chups. sugar plum candy jelly-o bonbon gummies caramels.                 jelly icing tiramisu candy chupa chups chocolate bar.                  sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie.                  lollipop sugar plum lollipop jelly lollipop pudding.                  tart jelly-o gummi bears sweet roll gummi bears.                 jelly icing tiramisu candy chupa chups chocolate bar.                  sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie.                  lollipop sugar plum lollipop jelly lollipop pudding.                  tart jelly-o gummi bears sweet roll gummi bears.             </div>         </li>         <li class="list-el">             <div class="el-top">expand 4</div>             <div class="el-bottom">lollipop sugar plum lollipop jelly lollipop pudding.                  tart jelly-o gummi bears sweet roll gummi bears.                 jelly icing tiramisu candy chupa chups chocolate bar.                  sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie.                  lollipop sugar plum lollipop jelly lollipop pudding.                  tart jelly-o gummi bears sweet roll gummi bears.                 jelly icing tiramisu candy chupa chups chocolate bar.                  sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie.                  lollipop sugar plum lollipop jelly lollipop pudding.              </div>         </li>     </ul> </div>

css:

ul{     list-style: none;     max-width: 600px;     margin: 0 auto; } .list{     width: 100%;     padding: 0; } .list-el{     width: 100%;     height: 75px;     background: #ff00ff;     margin-top: 10px; }  .el-top{     width: 100%;     text-align: center;     line-height: 75px; }  .el-bottom{     text-align: center;     -webkit-transition: max-height 1.5s ease;     -moz-transition: max-height 1.5s ease;     transition: max-height 1.5s ease;     position: absolute;     background: #f0fff0;     top: auto;     left: 0;     width: 100%;     text-align: left;     height: auto;     max-height: 0;     overflow: hidden; }  .list-el:hover .el-bottom{     display: block;     max-height: 700px; }

maybe has ideas how solve this? appreciate much.

comment: solutions suggested on link addressing same issue, missed mark on trying achieve therefore question not covering actual question , none of answers suited situation updated question have more clear view. there question asks solutions how height, misses fact how , why use it, therefore solutions of questions doesn't fit one.


Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more