How to Use Rendered Attribute With Html Tags

Scenario:

Basically if you want to conditionally show/hide in any visual force element we will use the "rendered=true/false".Let assume if your using any html tags like <div> <span> in your visual force page and you want to hide/show conditionally we can not use the "rendered=true/false" property with these html tags.

Solution:

In these type of situations you can use some standard css styles to show or hide html content on conditionally.

<div style="{!IF(AND(condition1,condition2),'display:block','display:none')}">

//display:block - Shows the content,it's similar to rendered="true"

//dispaly:none - Hides the content,it's similar to rendered="false"

Sample Code:

<div class="slds-truncate sldswordWrap" style="{!IF(AND(condition1,condition2),'display:block','display:none')}">
      <span class="slds-icon_container slds-icon-standard-call">
        <svg class="slds-icon" aria-hidden="true">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#call" />
        </svg>
        <span class="slds-assistive-text">Description of icon when needed</span>
      </span>

</div>

Hope this helped you..Enjoy!..