www.webdeveloper.com
Results 1 to 2 of 2

Thread: Hide Divs if content is blank

  1. #1
    Join Date
    Aug 2010
    Posts
    34

    Hide Divs if content is blank

    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>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb Something to try...

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles