[SalesForce] Rendering a div based on a condition

I need to render a tag based on the value of layoutObj.colOneInputType.Required.
But i cannot use the outputpanel rendered attribute for the implementation of the same! Any work arround?

here is my code snippet.
the problem statement here is that i want to add a red vertical bar as used by salesforce for denoting required textareas whereas for non mandatory text areas i dont want to display the bar.

<apex:outputPanel rendered="{!If(layoutObj.colOneInputType.dataType=='textarea',true,false)}">
<div class="testrequiredInput">
  <div class="testrequiredBlock"></div>
  <apex:inputTextarea rows="3" styleclass="clsInputTextArea srm_clsDynamicInputTextArea" title="{!layoutObj.colOneInputType.Tooltip}" id="textArea"  value="{!layoutObj.colOneInputType.value}" onChange="checkVisibility('{!layoutObj.colOneInputType.isChangeNeedRefresh}');"   disabled="{!isViewMode}" onkeyup="validateMaxLength(this);"/>
</div>
<apex:outputPanel rendered="{!If(layoutObj.colOneInputType.URLInfo!=null,true,false)}">
<input type="button" class="urlButtonDeactivated1" title="{!layoutObj.colOneInputType.URLInfo}" style="margin-left:2px;cursor:pointer" onmouseout="this.className='urlButtonDeactivated1'" onmouseover="this.className='urlbutton1';" onclick="window.open('{!layoutObj.colOneInputType.URLInfo}','_blank','height=500,width=1000,left=170,top=100,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,status=no')"/>
</apex:outputPanel>
</apex:outputpanel>

Best Answer

Have you tried using style attribute like this inside the div:

style="{!IF(layoutObj.colOneInputType.Required, 'display:block', 'display:none')}"