Hide Divs if content is blank

**amean_n** · 11-19-2010 06:51 AM

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 CSS how can the container div "" be hidden.

I have the following code: where the div i would like to hide IF the div "CaseStudyContent" is "CaseStudyRowFirst" and "CaseStudyRow"

Please ignore "{$metadata.Case Study.Client$}" ass this is tags for the CMS.

Thank you

Code:

  
        <div class="CaseStudyRowFirst">
            <div class="CaseStudySectionName">
                Client:
            </div>			
            <div class="CaseStudyContent">	{$metadata.Case Study.Client$}		
			 
            </div>
        </div>
        <div class="CaseStudyRow">
            <div class="CaseStudySectionName">
                Sector:
            </div>
            <div class="CaseStudyContent">{$metadata.Case Study.Sector$}
            </div>
        </div>
        <div class="CaseStudyRow">
            <div class="CaseStudySectionName">
                Shows / Location:
            </div>
            <div class="CaseStudyContent">{$metadata.Case Study.Shows / Location$}
            </div>
        </div>
        <div class="CaseStudyRow">
            <div class="CaseStudySectionName">
                Challenge / Objective:
            </div>
            <div class="CaseStudyContent">{$metadata.Case Study.Challenge / Objective$}
            </div>
        </div>
        <div class="CaseStudyRow">
            <div class="CaseStudySectionName">
                Testimonial:
            </div>
            <div class="CaseStudyContent">{$metadata.Case Study.Testimonial$}
            </div>
        </div>
        <div class="CaseStudyRowLast">
            <div class="CaseStudySectionName">
                Additional Text:
            </div>
            <div class="CaseStudyContent">{$metadata.Case Study.Additional Text$}
            </div>
        </div>
    </div>

**JMRKER** · 11-19-2010 03:01 PM

I realize the information within the curly brackets {} will be replaced by the CMS information (moved into comments for clarificaiton only),
but you should be able to put this into the correct 'id.innerHTML' element similar to the "Simulation" button examples

i just made a guess at the CSS because you had not included it in your request.

Code:

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function AddInfo() {
  document.getElementById('Client').innerHTML = 'Client Information';
  document.getElementById('Sector').innerHTML = 'Sector Information';
  document.getElementById('Show').innerHTML = 'Show Information';
  document.getElementById('Challenge').innerHTML = 'Challenge Information';
  document.getElementById('Testimonial').innerHTML = 'Testimonial Information';
  document.getElementById('AddedText').innerHTML = 'Added Text Information';
}
function SubInfo() {
  document.getElementById('Client').innerHTML = '';
  document.getElementById('Sector').innerHTML = '';
  document.getElementById('Show').innerHTML = '';
  document.getElementById('Challenge').innerHTML = '';
  document.getElementById('Testimonial').innerHTML = '';
  document.getElementById('AddedText').innerHTML = '';
}
</script>
<style type="text/css">
.CaseStudyContent {
	background-color: yellow; 
	border: 1px solid yellow;
}
</style>
</head>
<body>
        <div class="CaseStudyRowFirst">
            <div class="CaseStudySectionName"> Client: </div>			
            <div class="CaseStudyContent" id="Client"></div><!-- {$metadata.Case Study.Client$} -->
        </div>
        <div class="CaseStudyRow">
            <div class="CaseStudySectionName"> Sector: </div>
            <div class="CaseStudyContent" id="Sector"></div><!-- {$metadata.Case Study.Sector$} -->
        </div>
        <div class="CaseStudyRow">
            <div class="CaseStudySectionName"> Shows / Location: </div>
            <div class="CaseStudyContent" id="Show"></div><!-- {$metadata.Case Study.Shows / Location$} -->
        </div>
        <div class="CaseStudyRow">
            <div class="CaseStudySectionName"> Challenge / Objective: </div>
            <div class="CaseStudyContent" id="Challenge"></div><!-- {$metadata.Case Study.Challenge / Objective$} -->
        </div>
        <div class="CaseStudyRow">
            <div class="CaseStudySectionName"> Testimonial: </div>
            <div class="CaseStudyContent" id="Testimonial"></div><!-- {$metadata.Case Study.Testimonial$} -->
        </div>
        <div class="CaseStudyRowLast">
            <div class="CaseStudySectionName"> Additional Text: </div>
            <div class="CaseStudyContent" id="AddedText"></div><!-- {$metadata.Case Study.Additional Text$} -->
        </div>
    </div>

<hr>
<h2>Simulated Population</h2>
<button onclick="AddInfo()">Add Information</button>
<button onclick="SubInfo()">Sub Information</button>

</body>
</html>

Thread: Hide Divs if content is blank

Thread Tools

Display

Hide Divs if content is blank

Something to try...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions