Hide Divs if content is blank

This site is best viewed in a modern browser with JavaScript enabled.

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 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

  

        <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

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.

<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>