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


i trying have jquery slidetoggle() function bound row of data in apex:pageblocktable.

i displaying information in table , want if clicks on row, more information related contact displayed in slider , rest of rows move down. when clicks again, slider moves , normal.

if not wrong, think need bind row elements (apex:columns) in 1 div , information in slider in other. somehow not working.

here 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 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>             paragraph end paragraphs.              should feel <em>lucky</em> have seen such paragraph in             life.  congratulations!          </p>      </div>        </apex:pageblocktable> </apex:pageblock>               </body>    </apex:page>    

i trying understand visualforce , js appreciated.

best, ankit

if understand code correctly there multiple div of <div id="rows"> , multiple div of <div id="rowinfo" >. please let me know if assumption wrong.

ideally there should 1 element of 1 id not multiple. might causing unexpected behavior. can change <div class="rows"> , <div id="rowinfo" > respectively.

and try

<script> $j = jquery.noconflict();     $j(document).ready(function(){       $j(".rows").click(function(){     $j(".rowinfo").slidetoggle("slow");   }); });  </script> 

if doesnt work out.. check javascript console errors.. let me knwo if failing on perticular browser or all?


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -