0

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>
  • Sorry for the typo error. I have fixed it. The problem is not this . the given code is working for me . I am having this piece of code where the div tag should get dynamic id's populated and I should be able to render them on click . – user2703132 Dec 11 '14 at 10:12
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>
| improve this answer | |
  • Sorry for the typo error I have updated the code now. – user2703132 Dec 11 '14 at 10:13
0

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

| improve this answer | |
0

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.

| improve this answer | |
  • The difference here is responsiveness: using CSS and JavaScript purely in the browser yields a fast response to the user whereas going to the server as you are doing is slower. – Keith C Dec 11 '14 at 9:11
  • yes @Keith C i am agree with you in that case my code not suitable. – DKSalesforce Lerner Dec 11 '14 at 9:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.