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

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

Answers


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?


 <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>

Need Your Help

How do I change IE script debugger from MS Script Debugger to VS 2005

javascript internet-explorer visual-studio-2005 debugging

I have Microsoft Script debugger installed and selected (somwhere) as the script debugger of IE. I want to make VS the default script debugger. When I uninstall MS Script debugger IE just wouldn't ...

Get last element of pipeline in powershell

powershell pipeline

This might be weird, but stay with me.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.