javascript - I want a thumbnail to expand in size as the div does -


hey i'm looking - i'm more of designer coder trying learn :)

i have kinda working can't figure out how thumbnail image resize height of expanded div - expands.

i have container div , inside div have multiple "expandable" divs contain information different products.

each of these expandable divs has title, thumbnail image , price of product (as plus sign image expand div itself).

when div expanded there more information product on show.

but when div expanded, "price" disappear (as it's visible in expanded information) , image automatically scale height of expanded div.

so product information on on left hand side of div , image taking right half of div (with minus button on top of it.

this html

<div class="expandingcontentcontainer">     <div class="expandingcontent">         <div id="expandingcontentheader" style="display:inline; float:left">             <h4>portable navigation system</h4>         </div>         <div id="expandingcontentthumb" style="display:inline;">             <img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />         </div>         <div id="expandingcontentprice" style="display:inline;">             <img src="images/assets/icon_pound.png" />price: £200         </div>         <div id="expandersign">             <img src="images/assets/icon_plus.png" />         </div>         <div id="expandercontent" style="display:none">             <p>bluetooth voice dialling without hassle of having train device. reads text messages out loud , features stylish 2,8" colour display. play music , phone calls via oe-audio system.</p>             <p><img src="images/assets/icon_pound.png" />price: £200</p>             <p><img src="images/assets/icon_tick.png" />availability: models<img src="images/assets/icon_hash.png" />part number: 3600-78-474<img src="images/assets/icon_pencil.png" />legal: n/a</p>         </div>      </div> </div>  <script type="text/javascript"> $(document).ready(function(){ $("#expandersign").click(function(){     $("#expandercontent").slidetoggle();     if ($("#expandersign").text() == "+"){         $("#expandersign").name("−")     }     else {         $("#expandersign").text("+")     } }); }); </script> 

sounds solve entirely css. long container-div has fixed height, should able set height of img-element height: 100%, causing image scale accordingly. however, not work while display-mode of container set display: inline. have use display: inline-block able set height of div.


Comments

Popular posts from this blog

c# - Operator '==' incompatible with operand types 'Guid' and 'Guid' using DynamicExpression.ParseLambda<T, bool> -