Apex Code Development You need to sign in to do that
Don't have an account?
Arvind1 Collapse pageblocksections using javascript
Hi All,
I have a pageblocksection inside <apex:repeat> tag. So it will be around 10-15 pageblocksections in the page with proper data.
My requirement is as follows:
I need to have a link at the top of the page namely Collapse All, clicking on which all the pageglocksections should collapse. Same requirement for expanding all sections.
I am able to achieve this for a single pageblocksection with the following code.
<apex:page tabstyle="Account" standardController="Account" extensions="ttttttttttt">
<script>
function PageBlockSectionCollapse(el){
if(typeof twistSection === 'function'){
var theTwist = document.getElementById(el);
if(theTwist){
twistSection(theTwist.childNodes[0].childNodes[0]);
}
}
}
</script>
<apex:form >
<apex:pageBlock >
<apex:pageblockSection columns="1" showHeader="true" title="Add CI Relationships" id="CIRel">
<script>PageBlockSectionCollapse('{!$Component.CIRel}');</script>
123
</apex:pageblockSection>
<apex:commandLink value="123" oncomplete="javascript:PageBlockSectionCollapse('{!$Component.CIRel}');"/>
</apex:pageBlock>
</apex:form>
</apex:page>
But if I give the pageblocksection inside repeat tag, I am not able to access the id of pageblocksection using document.getElementbyId. I thought it would come as an array in the javascript function and all sections will be collapsed.
Any suggestions will be helpful.
Thanks
Arvind
Try out this is sample code for Collapsable-pageblocksections through Jquery :
<apex:page showHeader="false" controller="cls_jquery">
<apex:form >
<head>
<script>
$(document).ready(function()
{
$('.main').children('.box-inner').children('.box-content').attr("style","display:none;");
$('.Link').click(function()
{
if($(this).hasClass('open'))
{
$(this).parent().parent('.box-top').parent('.box-inner').parent('.main').children('.box-inner').children('.box-content').attr("style","display:none;"); $(this).parent().parent('.box-top').siblings('.box-content').attr("style","display:block;");
$(this).parent().parent('.box-top').parent('.box-inner').parent('.main').children('.box-inner').children('.box-top').children('h3').children('.Link').removeClass('close').addClass('open');
$(this).removeClass('open').addClass('close');
}
else if($(this).hasClass('close'))
{
$(this).parent().parent('.box-top').siblings('.box-content').attr("style","display:none;");
$(this).removeClass('close').addClass('open');
}
});
});
</script>
</head>
<body>
<apex:pageBlock >
<table width="800px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><div class="main" >
<div class="box-inner" >
<div class="box-top" style="background:#999999;margin-bottom:5px;bottom:5px;">
<h3><a class="Link open clsstyle" style="cursor:auto;">Personal Information</a></h3>
</div>
<div class="box-content">
<table border="0" width="350px" cellspacing="0" cellpadding="0">
<tr>
<td><h3 class="clslabel">First Name: </h3></td>
<td>
<input/>
</td>
</tr>
<tr>
<td><h3 class="clslabel">Last Name:</h3></td>
<td><input/>
</td>
</tr>
<tr>
<td><h3 class="clslabel">Date Of Birth: </h3></td>
<td> <input type="text"/></td>
</tr>
<tr>
<td><h3 class="clslabel">Gender:</h3></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input title="Male" class="clslabel" value="Male"/><h3 class="clslabel">Male</h3></td>
<td><input type="radio" title="Female"class="clslabel" name="group" value="Female"/><h3 class="clslabel">Female</h3></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="box-inner" >
<div class="box-top" style="background:#999999;margin-bottom:5px;bottom:5px;">
<h3> <a class="Link open clsstyle" style="cursor:auto;">Professional Information</a></h3>
</div>
<div class="box-content">
<table border="0" width="350px">
<tr>
<td><h3 class="clslabel">Industry:</h3></td>
<td>
<apex:selectList title="State" value="{!teducation}" size="1" >
<apex:selectOption itemValue="SELECT" itemLabel="SELECT"/>
<apex:selectOption itemValue="Telcom" itemLabel="Telcom"/>
<apex:selectOption itemValue="Marketing" itemLabel="Marketing"/>
<apex:selectOption itemValue="Finance" itemLabel="Finance"/>
<apex:selectOption itemValue="IT " itemLabel="IT"/>
</apex:selectList>
</td>
</tr>
<tr>
<td><h3 class="clslabel">Experience Summary:</h3></td>
<td><textarea rows="3" cols="30" ></textarea> </td>
</tr>
</table>
</div>
</div>
</div></td>
</tr>
</table>
</apex:pageBlock>
</body>
</apex:form>
</apex:page>
<script> function defaultCollapseAll() { this.previousHandler = window.onload; this.execute = function() { if(this.previousHandler!=null) this.previousHandler(); var imgs = window.top.document.getElementsByTagName('img'); for(var x in imgs) if(imgs[x].className=='hideListButton') { twistSection(imgs[x]); } } } window.onload = new defaultCollapseAll().execute; </script>This code is an adaptation of a custom Home Page Component I created back in 2007 that would allow a user to collapse or expand all elements on the page simultaneously. The version above will 1) store the previous onload handler, 2) assign itself to run when the page loads, and 3) collapse all <apex:pageBlockSection> elements when it runs. It works using the built-in libraries provided by Salesforce, so your mileage may vary.
Just re-read the original post. You can adjust the script I provided to run on an <apex:commandLink> click action to simply collapse all sections.
This may help Salesforce Receipe. Wrap all the pageblock sections in an outer div - one call and your done. You could of course us a simple <a> link to call the function. I extended this as I wanted the link tagged to the end of the PageBlock title
I noticed that you seemed to be using jquery so it should be be straightforward
Is there any way I can use twistAllSections() to expand all the sections and collapse all sections? something like this:
It is something like:
<a href="#" onclick="twistAllSections(true);return false;">Expand All</a>
" | "
<a href="#" onclick="twistAllSections(false);return false;">Collapse All</a>
Please let me know.
Thanks!
<apex:page id="contentsSearch"> <script type="text/javascript"> function defaultCollapseAll(previousHandler) { this.execute = function() { if(previousHandler!=null) previousHandler(); var imgs = window.top.document.getElementsByTagName('img'); for(var x in imgs) if(imgs[x].className=='hideListButton') { twistSection(imgs[x]); } } } var previousHandler = window.onload; window.onload = new defaultCollapseAll(previousHandler).execute; </script> </apex:page>Original source seems like prevent previous window.onload function called. Then i modify source like above.