+ Start a Discussion
Swathi JainSwathi Jain 

How do I callapse PageBlockSection by default on Page or by Controller?

I  am  trying for this pusrpose by using link but it is not working for me , can you please help me 

http://boards.developerforce.com/t5/Visualforce-Development/How-do-I-callapse-PageBlockSection-by-default-on-Page-or-by/m-p/96140

 

 

 

My code is 

<apex:page id="thePage" sidebar="false">
<apex:pageBlock >
<apex:pageBlockSection title="PG1" collapsible="true" id="CollapseDefault">
abccccccccccccc

</apex:pageBlockSection>
</apex:pageBlock>

<script language="javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

function dotest() {
twistSection(document.getElementById('j_id0:form9:j_id189:CollapseDefault').childNodes[0].childNodes[0]);
}

addLoadEvent(dotest);
</script>


</apex:page>

Can you please suggest methe possiblibity 

Best Answer chosen by Admin (Salesforce Developers) 
Chamil MadusankaChamil Madusanka
<apex:page id="thePage" sidebar="false">

<apex:form id="TheForm">


<apex:pageBlock id="block">

<apex:actionregion id="ar">
<apex:pageBlockSection title="PG1" collapsible="true" id="CollapseDefault">
abccccccccccccc

</apex:pageBlockSection>

</apex:actionregion>
</apex:pageBlock>

<script language="javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

function dotest() {
twistSection(document.getElementById('thePage:TheForm:block:CollapseDefault').childNodes[0].childNodes[0]);
}

addLoadEvent(dotest);
</script>

</apex:form>
</apex:page>

 

two tags means, you have another pageblocksections. Isn't it?

 

Then you have toanother two statements in twistssection function,

 

function dotest() {
twistSection(document.getElementById('thePage:TheForm:block:CollapseDefault').childNodes[0].childNodes[0]);
twistSection(document.getElementById('thePage:TheForm:block:CollapseDefault2').childNodes[0].childNodes[0]);
}

 

 

 

 

 If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.

All Answers

Chamil MadusankaChamil Madusanka

Please do following changes

 

<apex:page id="thePage" sidebar="false">
<apex:pageBlock id="block">
<apex:pageBlockSection title="PG1" collapsible="true" id="CollapseDefault">
abccccccccccccc

</apex:pageBlockSection>
</apex:pageBlock>

<script language="javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

function dotest() {
twistSection(document.getElementById('thePage:block:CollapseDefault').childNodes[0].childNodes[0]);
}

addLoadEvent(dotest);
</script>


</apex:page>

 If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.

Swathi JainSwathi Jain

Chamil,

Thanks for your reply. but i have like another 2 tags which is not working.

If i have 2 taggs these are not working

 

<apex:page id="thePage" sidebar="false">

<apex:form id="TheForm">


<apex:pageBlock id="block">

<apex:actionregion id="ar">
<apex:pageBlockSection title="PG1" collapsible="true" id="CollapseDefault">
abccccccccccccc

</apex:pageBlockSection>

</apex:actionregion>
</apex:pageBlock>

<script language="javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

function dotest() {
twistSection(document.getElementById('thePage:TheForm:block:ar:CollapseDefault').childNodes[0].childNodes[0]);
}

addLoadEvent(dotest);
</script>

</apex:form>
</apex:page>

Chamil MadusankaChamil Madusanka
<apex:page id="thePage" sidebar="false">

<apex:form id="TheForm">


<apex:pageBlock id="block">

<apex:actionregion id="ar">
<apex:pageBlockSection title="PG1" collapsible="true" id="CollapseDefault">
abccccccccccccc

</apex:pageBlockSection>

</apex:actionregion>
</apex:pageBlock>

<script language="javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

function dotest() {
twistSection(document.getElementById('thePage:TheForm:block:CollapseDefault').childNodes[0].childNodes[0]);
}

addLoadEvent(dotest);
</script>

</apex:form>
</apex:page>

 

two tags means, you have another pageblocksections. Isn't it?

 

Then you have toanother two statements in twistssection function,

 

function dotest() {
twistSection(document.getElementById('thePage:TheForm:block:CollapseDefault').childNodes[0].childNodes[0]);
twistSection(document.getElementById('thePage:TheForm:block:CollapseDefault2').childNodes[0].childNodes[0]);
}

 

 

 

 

 If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.

This was selected as the best answer
ArunaAruna

 Hi,

 

This is working perfectly.

 

Bu I have one more issue.

 

I have multiple page block section on vf page.

your solution is working perfectly when the page loaded all the pageblocksections are collapsed but when I expanded the particular page block section manually and did enter or modified some data on the form and hit on save again the page block section is collapsed which shouldn’t be.

 

 In my case modified data page block should be expanded again when i hit on save button and remaining should page block sections should be collapsed.

 

Do you have any an idea on this.

 

Thank you,

Chamil MadusankaChamil Madusanka

That's because your button doesn't have any rerendering. It will cause to refresh whole page. Our javascript code is run in page load. So add the rerender attribute to the command button and rerender your particular pageblock section.

Kirill_YunussovKirill_Yunussov

awesome solution, thank you.

Arun KArun K

Hi chamil,

 

I havea similar requirement,

I have a commandlink in pageblock table when I click it, the datatable which is in same pageblocktable should render.

At present I could able to render all records when i click on commandlink.

My req is to render that particual record's datatable

 

Here is my VF page.

 

Any input ?

 

<apex:page controller="repeatcontroller1" sidebar="false">
<apex:form >
<apex:pageBlock >
<apex:pageBlockTable value="{!CallplanAccounts}" var="status" border="0" cellpadding="6" cellspacing="13" columnsWidth="3">
<apex:column headerValue="Name">
{!status.acc.Name}&nbsp;&nbsp;
</apex:column>
<apex:column headerValue="Status">
{!status.acc.Active__c}&nbsp;&nbsp;
</apex:column>

<apex:column >
<apex:commandLink action="{!Callstatus}" id="renderit" >
CallString<apex:param name="cmid" value="{!status.acc.id}" assignTo="{!approveid}" />
</apex:commandLink> <br/>

<apex:pageblocksection collapsible="false" rendered="{!visible_comment =='show'}" >

<apex:dataTable value="{!status.acc.Call__r}" var="cm" >
<apex:column headerValue="Callstring name" >
{!cm.name}
</apex:column>
<apex:column headerValue="Origianl values" >
{!cm.Original_Call__c}
</apex:column>
<apex:column headerValue="Updated values" >
<apex:outputField value="{!cm.Updated_Call__c }" >
<apex:inlineEditSupport event="ondblClick" showOnEdit="saveButton" / >
</apex:outputfield>
</apex:column>
</apex:dataTable>
</apex:pageblocksection>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>

AshishyadavAshishyadav
i tried many times but this is not working for me..is it correct