/    Sign up×
Community /Pin to ProfileBookmark

How can you hide Divs if content is blank.

Copy linkTweet thisAlerts:
Nov 23.2010

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:

[COLOR=”Red”]IF[/COLOR] div [COLOR=”SeaGreen”][I]id1[/I][/COLOR] is empty, [COLOR=”Red”]THEN[/COLOR] (CSS) display: none; ?

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

Code:

[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>[/CODE]

Thank you for your help ?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorNov 23.2010 — If the empty div is written without any "gap", like:
<i>
</i>&lt;div id="id1"&gt;&lt;/div&gt;

The code is simple:
<i>
</i>var mydiv=document.getElementById('id1');
if(!mydiv.hasChildNodes()){mydiv.style.display='none'}


But that should be written within a function triggered by an [B]event[/B], following the user's [B]action[/B]. Which could be that action of the user?
Copy linkTweet thisAlerts:
@amean_nauthorNov 23.2010 — 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
Copy linkTweet thisAlerts:
@KorNov 23.2010 — <i>
</i>&lt;script type="text/javascript"&gt;
onload=function(){
var mydiv=document.getElementById('id1');
if(!mydiv.hasChildNodes()){mydiv.style.display='none'}
}
&lt;/script&gt;


You should really learn javascript if you want to deal with this language.
Copy linkTweet thisAlerts:
@TamburraAug 24.2011 — <i>
</i>&lt;script type="text/javascript"&gt;
onload=function(){
var mydiv=document.getElementById('id1');
if(!mydiv.hasChildNodes()){mydiv.style.display='none'}
}
&lt;/script&gt;


You should really learn javascript if you want to deal with this language.[/QUOTE]

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.

&lt;script type="text/javascript"&gt;
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'}
}
&lt;/script&gt;

&lt;table class="addinfo_table"&gt;
&lt;tr id="id1"&gt;
&lt;td id="addinfo_td-left"&gt;Type&lt;/td&gt;
&lt;td id="id2"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="id3"&gt;
&lt;td id="addinfo_td-left"&gt;Length&lt;/td&gt;
&lt;td id="id4"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
×

Success!

Help @amean_n spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...