Question

I have two divs, whose heights I would like to control relative to each other. The point of these divs is that when a user mouses over one of them, it expands vertically and the other retracts vertically (smoothed with CSS transitions). Basic markup:

<div class="product">
    <h2>Product Name</h2>

    <div class="preview" style="background:url('/images/preview.png'); "></div>
    <div class="detail" style="background:url('/images/design.png'); "></div>

    <div class="product_info">
        <span class="quantity">7 Available</span>
        <span class="price">$19</span>
    </div>
</div>

This is generated a number of times with unique images and other data pulled from a database, so these images are just placeholders, but that’s not the question.

Here’s the stripped down CSS:

div.product {
    margin: 4px;
    padding: 4px;
    display: inline-block;
    width: 221px;
    height: 319px;
    box-shadow: 0 0 5px #ccc;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
}

div.product div.preview, div.product div.detail {
    height: 127px;
    width: 205px;
    margin: auto;
    margin-bottom: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 0 5px #ccc;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    -moz-transition: 0.25s linear;
    -o-transition: 0.25s linear;
    -webkit-transition: 0.25s linear;
}

div.product div.detail:hover, div.product div.preview:hover {
    height: 254px;
}

div.product h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
}

div.product span.price {
    color: #B32B2B;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
    float: right;
}

div.product span.quantity {
    text-align: left;
    float: left;
}

Now, the idea is that when you mouse over either image it expands to fill the space of the other image, which shrinks in response. This can’t be done in CSS with this markup, and not with anything I’ve tried.

I need to use JavaScript on each one of those divs for onmouseover and previousSibling to modify the CSS height. The problem is, things just don’t want to work for me. Anyone have a solution?

Answer 1

Okay, thanks to WSkid, I’ve got a solution working. Took only minor modifications. Final JavaScript:

<script type="text/javascript">
    $(document).ready(function(){
        $('div.preview').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){
                curDiv.nextAll($('div.detail:first')).addClass('short');
                curDiv.addClass('expand');
            },function(){
                curDiv.nextAll($('div.detail:first')).removeClass('short');
                curDiv.removeClass('expand');
            });
       });
        $('div.detail').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){
                curDiv.prevAll($('div.preview:first')).addClass('short');
                curDiv.addClass('expand');
            },function(){
                curDiv.prevAll($('div.preview:first')).removeClass('short');
                curDiv.removeClass('expand');
            });
       });
    });
</script>

Final CSS:

div.preview, div.detail {
    height: 205px;
}

div.expand {
    height: 248px;
}

div.short {
    height: 8px;
}