How to wrap apex:columns in a div to use in slideToggle()

Question

I am trying to have a jquery slideToggle() function bound to a row of data in an apex:pageBlockTable.

I am displaying some information in the table and want that if someone clicks on any row, some more information related to that contact is displayed in a slider and the rest of the rows move down. When he clicks again, the slider moves up and everything is back to normal.

If I am not wrong, I think I need to bind row elements (apex:columns) in one div and the information in the slider in the other. But somehow this is not working.

Here is the code:

<apex:page controller="xingShowSearchResult">

<head>
<style type="text/css"> 
#rowInfo,#rows{
        padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#rowInfo { 
    width:50px;
    display:none; 
}
 </style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
$j = jQuery.noConflict();

   $j(document).ready(function(){
      $j("#rows").click(function(){
    $j("#rowInfo").slideToggle("slow");
  });
});

</script>

</head>
<body>

<apex:pageMessages />
    <div id='backtoDiv' style="height:20px;">
        <apex:outputLink value="/apex/XingPageTab" style="color:blue;">Back to Home Page</apex:outputLink>
    </div>

<apex:pageBlock title="Suche Kontakte"> 
    <apex:pageBlockSection columns="1">
    <apex:form style="float:right" >
        <apex:commandLink style="height:20px;font-weight: bold;" value="Suchergebnisse entfernen" action="{!deleteSearchResult}" />
    </apex:form>
    </apex:pageBlockSection>
    <apex:pageBlockTable value="{!newList}" var="contacts" id="contactsTable">

       <div id="rows">
        <apex:column > 
            <apex:image url="{!contacts.photoURL__c}" /> 
        </apex:column>


        <apex:column headerValue="Name"> {!contacts.displayName__c}</apex:column>


        <apex:column headerValue="Firma"> {!contacts.firma__c}</apex:column>
        <apex:column headerValue="Title" > {!contacts.title__c}</apex:column>
      </div>



     <div id="rowInfo" >
         <p>
            This is the paragraph to end all paragraphs.  You
            should feel <em>lucky</em> to have seen such a paragraph in
            your life.  Congratulations!
         </p>
     </div>  
     </apex:pageBlockTable>
</apex:pageBlock>              
</body>



</apex:page>

I am trying to understand Visualforce and JS so any help would be appreciated.

Best, Ankit

Can you show some jsfiddle.net or tell what problem you are facing? — rahul maindargi, May 14 '13 at 14:39
Here is an example of what I want to do. I want to have same functionality bound to row of an Salesforce Apex table. http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle — ankittaneja, May 14 '13 at 19:09
ok so what is problem.. I think demo working correctly.. you can also show demo on jsFiddle.net if you want :) — rahul maindargi, May 14 '13 at 19:13
@Rahul:In the above mentioned code, when I click on one of the rows of apex:Table, the div rowInfo should slide down, but it does not. So whats wrong here?? — ankittaneja, May 14 '13 at 20:19

score 0 · Answer 1 · answered May 15 '13 at 05:22

If i understand your code correctly there will be multiple div of <div id="rows"> and multiple div of <div id="rowInfo" >. Please let me know if my this assumption is wrong.

ideally there should be only one element of 1 id not multiple. that might be causing the unexpected behavior. you can change it to <div class="rows"> and <div id="rowInfo" > respectively.

and try

<script>
$j = jQuery.noConflict();

   $j(document).ready(function(){
      $j(".rows").click(function(){
    $j(".rowInfo").slideToggle("slow");
  });
});

</script>

if this also doesnt work out.. check javascript console for any errors.. also let me knwo if its failing on any perticular browser or all?

Sonali Bhosale · Answer 2 · 2013-09-23T07:27:22.403

 <apex:page standardController="RequestActivity__c" recordSetvar="RequestActivity" extensions="MDFClaimForRequestActivity" id="thePage" showHeader="true">
    <apex:includeScript value="{!$Resource.min}"/>

            <apex:includeScript value="{!URLFOR($Resource.acclayout, 'accorpanel/jquery-1.9.1.js')}"/>
            <apex:includeScript value="{!URLFOR($Resource.acclayout, 'accorpanel/jquery-ui.js')}"/>
            <apex:stylesheet value="{!URLFOR($Resource.acclayout, 'accorpanel/jquery-ui.css')}"/>

    <style>
    .pgTdClass.active
    {
      background-image: url({!URLFOR($Resource.HpMDFAccordions,'HpAccordion/minus_sign.png')});
       background-repeat : no-repeat;
       background-position:left center;
    } 
    .pgTdClass
    {
    background-image: url({!URLFOR($Resource.HpMDFAccordions,'HpAccordion/plus_sign.png')});
       background-repeat : no-repeat;
       background-position:left center;
    }
    </style>

    <apex:form id="pgFrmId">
        <apex:pageBlock title="Activities" id="pgBlkId">
        <table width="100%" border="0" cellspacing="0" cellpadding="5" class="myAccordion" id="pgTbleId">
        <thead> 
            <tr>
            <td class="tableHeader"></td>
                <td class="tableHeader">Activity Name</td>      
                <td class="tableHeader">Activity Description</td>
                <td class="tableHeader">Status</td>
                <td class="tableHeader">Requested HP Investment</td>
                <td class="tableHeader">Claim Status</td>
            </tr>
        </thead>
         <tbody>
            <apex:repeat value="{!fWrapper}" var="activity">
                <tr class="pgTrId" style="border-left: 5px solid #000;" >
                    <td class="pgTdClass" onclick="getActivityDetails('{!activity.reqActivity}');">
                         <span class="pgImgClas"  id="{!activity.reqActivity}" ></span>
                    </td>

                    <td class="tableContent" id="aname">{!activity.reqActivity.Name}</td>
                    <td class="tableContent">{!activity.reqActivity.Activity_Descrpition__c}</td>
                    <td class="tableContent">{!activity.reqActivity.Status__c}</td>
                    <td class="tableContent">{!activity.reqActivity.RequestedHPInvestment__c}</td>
                    <td class="tableContent">{!activity.reqActivity.ClaimStatusTraffic__c}</td>
                </tr>
                <tr class="accordion" style="border-left: 5px solid #000; background-color:#fff;" >
                 <td colspan="6">
                 <apex:outputPanel id="actDetailPanel">
                    <h2 id="section1">Activity Details</h2>
                    <p>Hi youe data goes here...</p>
            </apex:outputPanel>
           </td>
           </tr>
            </apex:repeat>
        </tbody>
    </table>
    </apex:pageBlock>
    </apex:form>
    <script>
    jQuery(document).ready(function ($) 
    {
        var divs=$('.accordion').hide(); 
        var h2s=$('.pgTdClass').click(function () 
        {
           h2s.not(this).removeClass('active')
           $(this).toggleClass('active')
           var parentEle= $(this).parent();
           divs.not(parentEle.next()).slideUp()
           parentEle.next().slideToggle()
           return false; 
        });
    });    

    </script>
    </apex:page>

Hi I have done this functionality using tag. Try this. hope so it will help you..:) — Sonali Bhosale, Sep 23 '13 at 07:29

How to wrap apex:columns in a div to use in slideToggle()

2 Answers2