Question

I am trying to style a background of a div by using a top and bottom image for a drop shadow effect like so:

<div id='topline' style='background-image:url("topline.png"); background-repeat:no-repeat; height:10px'></div>
<div id='boxcontent' style='background-image:url("contentline.png"); background-repeat:repeat-y;'>
  [some content]
</div>
<div id='bottomline' style='background-image:url("bottomline.png"); background-repeat:no-repeat; height:10px'></div>

this works fine with the content, but as soon as there is no content the top and bottom divs are of course still displaying. Any ideas on how to improve this so that the entire box does not display unless it contains content?

Thanks

Answer 1

Assuming that there is more than one “box” on the page, you will need to change your ids to classes… as ids need to be unique to the page.

Having done that, you could do something like this with jQuery

$(‘.boxcontent:empty’).hide();

Example: http://jsfiddle.net/h5S9B/

Sorry @hofnarwillie. Forgot about hiding the other pieces. Revised:

if($('.boxcontent:empty')){
    $('.boxcontent:empty').hide(); 
    $('.boxcontent:empty').prev().hide();
    $('.boxcontent:empty').next().hide();    
}

Example 2: http://jsfiddle.net/h5S9B/1/

You could then turn this into a function for reuse:

var e = $('.boxcontent:empty'); 

function hideBoxes(e){
    if(e){
        e.hide();    
        e.prev().hide();
        e.next().hide();    
    }
}

hideBoxes(e);

Example 3: http://jsfiddle.net/h5S9B/2/