Dynamic Hide and Show

Question

I have the following piece of code where I want to dynamically hide or show div tag having a component on click of a button.. How can we achieve this?

<apex:page sidebar="false" title="Article List" >
<style>
td{
vertical-align : top;
text-align: left;
}



</style>

function hideshow(which){ if (!document.getElementById) return if (which.style.display=="block") which.style.display="none" else which.style.display="block" }

<apex:form >
<apex:pageBlock title="Article List" >
<apex:panelGrid width="100%">
<table width="99%">
<tr>
<th width="33%">Title</th>
<th width="33%">Article Type</th>
<th width="33%">Summary</th>
</tr>
</table>
<knowledge:articleList articleVar="article" hasMoreVar="false" pageSize="10">
<table width="99%">
<tr>
<td width="33%">
<apex:outputLink target="theIframe" value="{!URLFOR($Action.KnowledgeArticle.View,
article.id,['popup' = 'false'])}">{!article.title}</apex:outputLink>
</td>
<td width="33%"><apex:outputText >{!article.articleTypeLabel}</apex:outputText></td>

<td width="33%"><apex:outputText >{!article.summary}</apex:outputText></td>
</tr>

<tr>
<td> 
<a href="javascript:hideshow(document.getElementById('article'))">Click Here</a>
<div id="article" style="font:24px bold; display: none">
<c:articleComp articleId="{!article.articlenumber}" /> 
</div>
</td>
</tr>

</table>
</knowledge:articleList>
</apex:panelGrid>
<apex:commandButton value="Submit"/>


</apex:pageBlock>
</apex:form>
</apex:page>

Answer 1

You need to have the close Style tag </style> followed by an open Script tag <Script> and at the end replace </style> tag with </script> tag. Please refer the updated code below.

<style>
td{
vertical-align : top;
text-align: left;
}
</style>
<script type="text/javascript">

        function hideshow(which){
        if (!document.getElementById)
        return
        if (which.style.display=="block")
        which.style.display="none"
        else
        which.style.display="block"
        }
</script>

Answer 2

You need to move your Javascript into <script> tags instead of <style> tages - style is for CSS

Answer 3

VF Code :

<apex:form>
      <div id="contentToToggle" style="display:{!if(showContent,"block","none")};">
           <apex:outputPanel id="pannel1" title="First Pannel" >
                     Hi welcome to first block
            </apex:outputPanel>
      </div>

     <div id="contentToToggle" style="display:{!if(showContent1,"block","none")};">
       <apex:outputPanel id="pannel2" title="second Pannel">
           Hi welcome to second block
       </apex:outputPanel>

     <apex:commandbutton value="Show" action="{!toggleContent}"  style="float:right;"/>
     </div>
  </apex:form>

Apex Code :

public YourClassConstructor()
   {
           showContent = true;
           showContent1 = false;
   }
 public PageReference toggleContent() {

        if(showContent){
            showContent = false;
             showContent1 = true;
             }
        else{
            showContent = true;
             showContent1 = false;
            }
        return null;
    } 

Might be this code is useful for you. if i am wrong then correct me. i think this way you have also use dynamic hide/show on button click.