function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Abhish ChalkeAbhish Chalke 

How to conditionally hide a div in visualforce

<div class="col-md-7">
    <apex:inputSecret value="{!newPassword}" styleClass="form-control newPass formControl" />
</div>
<!--New Addition-->
<div class="panel conditionPanel" rendered="{!ISBLANK(newPassword)}">
    <ul class="list-unstyled font-12">
        <h5 class="font-12"><span class="glyphicon glyphicon-info-sign" /><strong>{!$Label.passwordmanage}</strong> </h5>
    </ul>
</div>

I wanted show next div only when user type something in new password
Best Answer chosen by Abhish Chalke
Dushyant SonwarDushyant Sonwar
Abhish,

Try with below code
 
<script>
	function showhide(obj){
		if(obj.value.trim() == ''){
			document.getElementById('newPasswordDiv').style.display = 'none';
		}
		else{
			document.getElementById('newPasswordDiv').style.display = 'block';
		}
	}
</script>
<div class="col-md-7">
    <apex:inputSecret value="{!newPassword}" styleClass="form-control newPass formControl" onchange`="showhide(this);return false;"/>
</div>
<!--New Addition-->
<div class="panel conditionPanel" id="newPasswordDiv" style="display:none;">
    <ul class="list-unstyled font-12">
        <h5 class="font-12"><span class="glyphicon glyphicon-info-sign" /><strong>{!$Label.passwordmanage}</strong> </h5>
    </ul>
</div>

Hope this helps!

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Abish,

>> https://developer.salesforce.com/forums/?id=9060G0000005hgzQAA

The above link has an implementation of using if condition to render the div.

>> https://help.salesforce.com/articleView?id=000324662&type=1&mode=1

This link has a similar implementation you can try checking.

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
AnudeepAnudeep (Salesforce Developers) 
Here is an example. You can use .hide() to conditionally hide the div 
 
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>

Let me know if it helps
Dushyant SonwarDushyant Sonwar
Abhish,

Try with below code
 
<script>
	function showhide(obj){
		if(obj.value.trim() == ''){
			document.getElementById('newPasswordDiv').style.display = 'none';
		}
		else{
			document.getElementById('newPasswordDiv').style.display = 'block';
		}
	}
</script>
<div class="col-md-7">
    <apex:inputSecret value="{!newPassword}" styleClass="form-control newPass formControl" onchange`="showhide(this);return false;"/>
</div>
<!--New Addition-->
<div class="panel conditionPanel" id="newPasswordDiv" style="display:none;">
    <ul class="list-unstyled font-12">
        <h5 class="font-12"><span class="glyphicon glyphicon-info-sign" /><strong>{!$Label.passwordmanage}</strong> </h5>
    </ul>
</div>

Hope this helps!
This was selected as the best answer