0

Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)

I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.

I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.

Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).

When the div is expanded there is some more information about the product on show.

But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.

So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.

This is my 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 the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
            <p><img src="images/assets/icon_pound.png" />Price: £200</p>
            <p><img src="images/assets/icon_tick.png" />Availability: Most 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>
Ross Mudd
  • 1
  • 1
  • Maybe consider setting the image as the background to the div and following this answer: http://stackoverflow.com/questions/5662735/stretch-background-image-css – themanatuf May 10 '13 at 13:49
  • This looks like it could. I'll give it a go tomorrow and let you know :) – Ross Mudd May 10 '13 at 15:43

2 Answers2

0

Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.

j.koch
  • 8
  • 3
  • 8
  • Hi sorry, that would work if I only had one
    but I'll be have many within the
    but thanks for the tip!! :)
     – Ross Mudd May 10 '13 at 15:43
0

In order to get a good help you should add a link to your website or the css files. You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto). You could also use a pre build library but it's really not necessary.

rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63