title: How to wrap apex:columns in a div to use in slideToggle()
body: <p>I am trying to have a jquery slideToggle() function bound to a row of data in an apex:pageBlockTable.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;apex:page controller="xingShowSearchResult"&gt;
  
  &lt;head&gt;
  &lt;style type="text/css"&gt; 
  #rowInfo,#rows{
          padding:5px;
      text-align:center;
      background-color:#e5eecc;
      border:solid 1px #c3c3c3;
  }
  #rowInfo { 
      width:50px;
      display:none; 
  }
   &lt;/style&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;
  &lt;/script&gt;
  
  &lt;script&gt;
  $j = jQuery.noConflict();
  
     $j(document).ready(function(){
        $j("#rows").click(function(){
      $j("#rowInfo").slideToggle("slow");
    });
  });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;apex:pageMessages /&gt;
      &lt;div id='backtoDiv' style="height:20px;"&gt;
          &lt;apex:outputLink value="/apex/XingPageTab" style="color:blue;"&gt;Back to Home Page&lt;/apex:outputLink&gt;
      &lt;/div&gt;
  
  &lt;apex:pageBlock title="Suche Kontakte"&gt; 
      &lt;apex:pageBlockSection columns="1"&gt;
      &lt;apex:form style="float:right" &gt;
          &lt;apex:commandLink style="height:20px;font-weight: bold;" value="Suchergebnisse entfernen" action="{!deleteSearchResult}" /&gt;
      &lt;/apex:form&gt;
      &lt;/apex:pageBlockSection&gt;
      &lt;apex:pageBlockTable value="{!newList}" var="contacts" id="contactsTable"&gt;
  
         &lt;div id="rows"&gt;
          &lt;apex:column &gt; 
              &lt;apex:image url="{!contacts.photoURL__c}" /&gt; 
          &lt;/apex:column&gt;
  
  
          &lt;apex:column headerValue="Name"&gt; {!contacts.displayName__c}&lt;/apex:column&gt;
  
  
          &lt;apex:column headerValue="Firma"&gt; {!contacts.firma__c}&lt;/apex:column&gt;
          &lt;apex:column headerValue="Title" &gt; {!contacts.title__c}&lt;/apex:column&gt;
        &lt;/div&gt;
  
  
  
       &lt;div id="rowInfo" &gt;
           &lt;p&gt;
              This is the paragraph to end all paragraphs.  You
              should feel &lt;em&gt;lucky&lt;/em&gt; to have seen such a paragraph in
              your life.  Congratulations!
           &lt;/p&gt;
       &lt;/div&gt;  
       &lt;/apex:pageBlockTable&gt;
  &lt;/apex:pageBlock&gt;              
  &lt;/body&gt;
  
  
  
  &lt;/apex:page&gt;   
  </code></pre>
  
  <p>I am trying to understand Visualforce and JS so any help would be appreciated.</p>
  
  <p>Best,
  Ankit</p>