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
Post a Comment