Apex Code Development You need to sign in to do that
Don't have an account?
SFDC_Learner Show Or Hide the sections
How can i show the show or hide for the individual sections.. not for all.
page:
<apex:page controller="questionsClass">
<apex:form >
<apex:actionfunction name="showAnswer" action="{!showAnswer}" rerender="out1"/>
<apex:actionfunction name="hideAnswer" action="{!hideAnswer}" rerender="out1"/>
<!--
<apex:commandLink value="Expand" action="{!showAnswer}" reRender="out1"/> |
<apex:commandLink value="Collapse" action="{!hideAnswer}" rerender="out1"/>
-->
<apex:outputpanel id="out1">
<table>
<tr height="20px;">
</tr>
<apex:repeat value="{!lstQC}" var="QC">
<tr>
<td>
<apex:image value="{!$Resource.plus}" onclick="showAnswer();" rendered="{!plusimg}"/>
<apex:image value="{!$Resource.minus}" onclick="hideAnswer();" rendered="{!minusimg}"/>
</td>
<td>
<apex:outputtext value="{!QC.q}" style="font-size:15px;font-weight:bold;color:red;"/>
</td>
</tr>
<tr >
<td>
</td>
<td >
<apex:outputtext value="{!QC.a}" style="margin-left:50px;color:green;" rendered="{!expandedval}"/>
</td>
</tr>
</apex:repeat>
</table>
</apex:outputpanel>
</apex:form>
</apex:page>
class:
public with sharing class questionsClass {
public void hideAnswer() {
expandedval = false;
minusimg = false;
plusimg = true;
}
public void showAnswer() {
expandedval = true;
minusimg = true;
plusimg = false;
}
public boolean minusimg { get; set; }
public boolean plusimg { get; set; }
public boolean expandedval { get; set; }
public List<Q_A__c> lstqa{get;set;}
public List<QuesClass> lstQC{get;set;}
public questionsClass(){
expandedval = false;
plusimg = true;
minusimg = false;
lstqa = new List<Q_A__c>();
lstqa = [select id,name,answer__c from Q_A__c];
lstQC = new List<QuesClass>();
for(Integer i=0;i<lstqa.size();i++){
QuesClass objQC = new QuesClass();
objQC.q = lstqa[i].Name;
objQC.a = lstqa[i].answer__c;
lstQC.add(objQC);
}
}
public class QuesClass{
public String q{get;set;}
public String a{get;set;}
}
}
Once i clicked on + for any record it was expanding all sections... But not the specific one.
I need to show only the specific section that i clicked.
Can you help me.
You'll need to pass a unique identifier for the question/answer and maintain this information on a per-question basis.
Sounds like a job for our old friend the wrapper class.
Hi BoB,
Thanks for the reply.
I have a little idea on this. but could not implement in practical.
I know, i have to take a wrapper index variable to maintain an index per each row.
Can you give an idea, how that index variable is used in my vf code.. Is it required javascript function. ... ? or can we do it without javascript....?
JavaScript would be a simpler way to go if you don't need to retain that information in the controller.
Check out the JQuery toggle function:
http://api.jquery.com/toggle/
Bear in mind though that if you carry out a form postback that refreshes a collapsible item, it will revert to its default state, which may be annoying for users.
Hi,
Using javascript would be the best option to go with and make page more responsive. Calling action function agian again is annoying from user point of experience.
But still added some code to your existing code that may help you to go via action function :
<apex:page controller="questionsClass"> <apex:form > <apex:actionfunction name="showAnswer" action="{!showAnswer}" rerender="out1"> <apex:param value="" name="showAnswerIndex" /> </apex:actionfunction> <apex:actionfunction name="hideAnswer" action="{!hideAnswer}" rerender="out1"> <apex:param value="" name="hideAnswerIndex" /> </apex:actionfunction> <!-- <apex:commandLink value="Expand" action="{!showAnswer}" reRender="out1"/> | <apex:commandLink value="Collapse" action="{!hideAnswer}" rerender="out1"/> --> <apex:outputpanel id="out1"> <table> <tr height="20px;"> </tr> <apex:repeat value="{!lstQC}" var="QC"> <tr> <td> <apex:image value="{!$Resource.plus}" onclick="showAnswer('{!QC.questionIndex}');" rendered="{!plusimg}"/> <apex:image value="{!$Resource.minus}" onclick="hideAnswer('{!QC.questionIndex}');" rendered="{!minusimg}"/> </td> <td> <apex:outputtext value="{!QC.q}" style="font-size:15px;font-weight:bold;color:red;"/> </td> </tr> <tr > <td> </td> <td > <apex:outputtext value="{!QC.a}" style="margin-left:50px;color:green;" rendered="{!expandedval}"/> </td> </tr> </apex:repeat> </table> </apex:outputpanel> </apex:form> </apex:page> class: public with sharing class questionsClass { public void hideAnswer() { String hideIndex = ApexPages.currentPage().getParameters().get('hideAnswerIndex'); // execute code according to index value expandedval = false; minusimg = false; plusimg = true; } public void showAnswer() { String showIndex = ApexPages.currentPage().getParameters().get('showAnswerIndex'); // execute code according to index value expandedval = true; minusimg = true; plusimg = false; } public boolean minusimg { get; set; } public boolean plusimg { get; set; } public boolean expandedval { get; set; } public List<Q_A__c> lstqa{get;set;} public List<QuesClass> lstQC{get;set;} public questionsClass(){ expandedval = false; plusimg = true; minusimg = false; lstqa = new List<Q_A__c>(); lstqa = [select id,name,answer__c from Q_A__c]; lstQC = new List<QuesClass>(); for(Integer i=0;i<lstqa.size();i++){ QuesClass objQC = new QuesClass(); objQC.q = lstqa[i].Name; objQC.a = lstqa[i].answer__c; lstQC.add(objQC); } } public class QuesClass{ public String q{get;set;} public String a{get;set;} public Integer questionIndex {get; set;} // can use a boolean to toggle answer display public Boolean expandAnswer {get; set} } }