1

I have a problem i want to create a simple collapsible blocktable, i followed this tutorial to do that in this tutorial, the expanding element expands and collapses inside an apex column and in my case the table that i want to show is very large and does not fit within the column , so what i want is onclick event i make all the other columns disappear to give enough space to this column to occupy the hole space and hence to be shown correctly here is my code (but i do not know how ):

//some code before
<apex:column >
<apex:outputpanel id="plusimage">
<apex:image url="{!$Resource.Plus_Image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.minusimage}','{!$Component.plusimage}','{!$Component.inlinetablesec2}')" /> 
</apex:outputpanel>
<apex:outputpanel id="minusimage" style="display:none;">
<apex:image url="{!$Resource.Minus_image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.plusimage}','{!$Component.minusimage}','{!$Component.inlinetablesec2}')" />
</apex:outputpanel>
<apex:outputpanel id="inlinetablesec" style="display:none;">
<apex:pageblocktable value="{!map_condidat_cv[key]}" var="tm" >
<apex:column value="{!tm.Placement__r.name}"/>
<apex:column value="{!tm.Placement__r.Annonce__c}"/>
<apex:column value="{!tm.Placement__r.Coefficient__c}"/>
<apex:column value="{!tm.Placement__r.Type_de_prestation__c}"/>
<apex:column value="{!tm.Placement__r.Qualification__c}"/>    
</apex:pageblocktable>
</apex:outputpanel>                                              
 </apex:column>

// some code after 

and here is the javascipt function :

 function switchMenu(obj,obj1,obj2,obj3) 
    {
        var str = document.getElementsByClassName(obj3);
        alert(str);


        var el = document.getElementById(obj);                                       
        if ( el.style.display != 'none' ) {
        el.style.display = 'none';
        }
        else {
        el.style.display = '';
        }
        var e2 = document.getElementById(obj1);                                       
        if ( e2.style.display != 'none' ) {
        e2.style.display = 'none';
        }
        else {
        e2.style.display = '';
        }
         var e3 = document.getElementById(obj2);                                       
        if ( e2.style.display != 'none' ) {
        e3.style.display = 'none';
        }
        else {
        e3.style.display = '';
        }


    }

and here is the result that i am getting now:

before clicking : enter image description here

after clicking (the table is not shown on the entire width): enter image description here

any ideas how to do that ?

4

0

You must log in to answer this question.

Browse other questions tagged .