function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Edwin HerreraEdwin Herrera 

Show/Hide HTML elements using IF/Else

I have developed a custom Visual Force Page that requires me to have two possible paragraph elements. One paragraph is Risks/Issues and the other is Value Measurement. This is dependent on the Percent Complete field of the object. If the Percent Complete is 100, Risks/Issues is hidden else Value Measurement is hidden. Below is what I have so far and both paragraphs are showing instead of one. How can I fix this?

<div id="risks">
<div id="sh">
<p id="VZ">Risks/Issues</p>
<p id="VH">Value Measurement</p>
</div>
<script type="text/javascript">
if(Work_Item__c.Percent_Complete__c==100){
    $('#VZ').hide();
    }else{
    $('#VH').hide();}
</script>
 
Best Answer chosen by Edwin Herrera
Nayana KNayana K
You can use this without script section :
<div id="risks">
<div id="sh">
<p id="VZ" style="display:{!IF(Work_Item__c.Percent_Complete__c != 100, 'block','none')}">Risks/Issues</p>
<p id="VH" style="display:{!IF(Work_Item__c.Percent_Complete__c == 100, 'block','none')}">Value Measurement</p>
</div>


OR

You can use this with script:
<div id="risks">
<div id="sh">
<p id="VZ">Risks/Issues</p>
<p id="VH">Value Measurement</p>
</div>
<script type="text/javascript">
$( document ).ready(function() {
if('{!Work_Item__c.Percent_Complete__c}' ==100){
    $('#VZ').hide();

    }else{
    $('#VH').hide();}
})
</script>




 

All Answers

Nayana KNayana K
This may work :
<div id="risks">
<div id="sh">
<p id="VZ">Risks/Issues</p>
<p id="VH">Value Measurement</p>
</div>
<script type="text/javascript">
if('{!Work_Item__c.Percent_Complete__c}' ==100){
    $('#VZ').hide();

    }else{
    $('#VH').hide();}
</script>
Edwin HerreraEdwin Herrera
It actually did not work. The code I provided is the only code I have force this. If there is anything you see that is missing please tell me. If you have any other ideas I would like to try them as well. It doesnt have to be exactly how I wanted it but as long as the same goal is reached I am fine.
Nayana KNayana K
You can use this without script section :
<div id="risks">
<div id="sh">
<p id="VZ" style="display:{!IF(Work_Item__c.Percent_Complete__c != 100, 'block','none')}">Risks/Issues</p>
<p id="VH" style="display:{!IF(Work_Item__c.Percent_Complete__c == 100, 'block','none')}">Value Measurement</p>
</div>


OR

You can use this with script:
<div id="risks">
<div id="sh">
<p id="VZ">Risks/Issues</p>
<p id="VH">Value Measurement</p>
</div>
<script type="text/javascript">
$( document ).ready(function() {
if('{!Work_Item__c.Percent_Complete__c}' ==100){
    $('#VZ').hide();

    }else{
    $('#VH').hide();}
})
</script>




 
This was selected as the best answer
Manish BhatiManish Bhati
Do not use the JavaScript way to hide <p> tag as after rendering, the style will be over ridded with the VF page stylesheet.
Also you are using jQuery library for this, which would make the code slower.

Better use the formula expression provided by Nayana, if the object is in the context of the page.
Edwin HerreraEdwin Herrera
Thank you Nanaya, that was very helpful. I was also able to do it as such:
<apex:variable var="wi" value="wi" rendered="{!IF(Work_Item__c.Percent_Complete__c==100, true, false)}"><p id="VZ">Value Measurement</p> </apex:variable>
<apex:variable var="wi" value="wi" rendered="{!IF(Work_Item__c.Percent_Complete__c==100, false, true)}"><p id="VH">Risks/Issues</p> </apex:variable>