How can you hide Divs if content is blank.

[amean_n]

Hi there,

I would like javascript to be able to hide a div based upon a containing div having no content.

The text/content of the div is being pulled in by the CMS, if the user has not inputted anything into the CMS how can the container div "CaseStudyRow" be hidden.

Each div I want to hide (if the cms system says its blank) have ID's assigned to them ; id="1", id="2", id="3" and so on....

I have the following code: where the div i would like to hide IF the contents are empty according to the CMS is CaseSudyRow.

Would an If statement be the one needed here ?

Something like:

IF div id1 is empty, THEN (CSS) display: none; ?

I do not know javascript that well, if not at all

Code:

<div id="1" class="CaseStudyRowFirst">
            <div class="CaseStudySectionName"> Client: </div>			
            <div class="CaseStudyContent" id="Client"></div><!-- CMS stuff -->
        </div>
        <div id="2" class="CaseStudyRow">
            <div class="CaseStudySectionName"> Sector: </div>
            <div class="CaseStudyContent" id="Sector"></div><!-- CMS stuff -->
        </div>
        <div id="3" class="CaseStudyRow">
            <div class="CaseStudySectionName"> Shows / Location: </div>
            <div class="CaseStudyContent" id="Show"></div><!-- CMS stuff -->
        </div>
        <div id="3" class="CaseStudyRow">
            <div class="CaseStudySectionName"> Challenge / Objective: </div>
            <div class="CaseStudyContent" id="Challenge"></div><!-- CMS stuff -->
        </div>
        <div id="4" class="CaseStudyRow">
            <div class="CaseStudySectionName"> Testimonial: </div>
            <div class="CaseStudyContent" id="Testimonial"></div><!-- CMS stuff -->
        </div>
        <div id="5" class="CaseStudyRowLast">
            <div class="CaseStudySectionName"> Additional Text: </div>
            <div class="CaseStudyContent" id="AddedText"></div><!-- CMS stuff -->
        </div>
    </div>

Thank you for your help

[Kor]

If the empty div is written without any "gap", like:

<div id="id1"></div>

The code is simple:

var mydiv=document.getElementById('id1');
if(!mydiv.hasChildNodes()){mydiv.style.display='none'}

But that should be written within a function triggered by an event, following the user's action. Which could be that action of the user?

[amean_n]

thank you, umm i'm guessing the action would be within the CMS, when the user hits the publish button.

can it be done on page load event, If so how?

thanks

[Kor]

<script type="text/javascript">
onload=function(){
var mydiv=document.getElementById('id1');
if(!mydiv.hasChildNodes()){mydiv.style.display='none'}
}
</script>

You should really learn javascript if you want to deal with this language.

[Tamburra]

<script type="text/javascript">
onload=function(){
var mydiv=document.getElementById('id1');
if(!mydiv.hasChildNodes()){mydiv.style.display='none'}
}
</script>

You should really learn javascript if you want to deal with this language.

I am trying to do something like this but a little different. My code mimics your code but I am wondering if there is an easier way for this as I have about 50 id's and trying to find a simpler way that what I am doing.

<script type="text/javascript">
onload=function(){
var block01=document.getElementById('id1');
var block02=document.getElementById('id2');
var block03=document.getElementById('id3');
var block04=document.getElementById('id4');
if(!block02.hasChildNodes()){block01.style.display='none'}
if(!block04.hasChildNodes()){block03.style.display='none'}
}
</script>

<table class="addinfo_table">
<tr id="id1">
<td id="addinfo_td-left">Type</td>
<td id="id2"></td>
</tr>
<tr id="id3">
<td id="addinfo_td-left">Length</td>
<td id="id4"></td>
</tr>
</table>