Show or Hide Div if one Div has Value?

Question

I know there are tons of examples on how to show or hide a div based on click or hover or some kind of user event. I'm looking for a java script sample or jquery sample that shows or hides a div based on weather the div has value. In other words. I am displaying a list of concerts in your area. If there are no concerts in your area another div should be displayed instead saying "there are no concerts in your area".

This needs to happen on page load. Without any user involvement.

Anyone ever used something like tis or a=can point me to a link that shows how to do this?

Thanks Oceantrain

Answer 1

$(function(){
    var $div = $("#div1");
    if(!$div.html().length)
        $div.hide();
});

If you would like to use a class selector, you can use the following code:

$(function(){

    var $div = $(".foo");

    $.each($div, function(i,v){ 
        var _$div = $(v);
        if(!_$div.html().length)
            _$div.hide();
    });
});

working demo here:

http://jsfiddle.net/tugberk/mAaDY/

Answer 2

$(function () {
    var $div = $("#div1");
    if($.trim($div.html()).length == 0) {
        $div.hide();
    }
});

Answer 3

$(function(){
if($("#div1").is(":empty"))
$("#div1").css("display","none");
$("#div2").css("display","block");
});

That should be one way how to make it work. For sure you must put in some logic that decides what div will be displayed.

Answer 4

There are tons of example to do this
Generally people use this to check/condition on value.

     if( $("this").val().length === 0 ) {
     $("this").hide()

Secondly

if( !$("this").val() ) { $("this").hide() }

With you can use text() or html()...
Something like
var text = jQuery("div").text();