function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sadik Shaik 3Sadik Shaik 3 

i Have two page block sections in a VF page. when i expand one page block section the other page block section should get collapse similarly when i expand the other page block section the first page block section should get collapse.

i Have two page block sections in a VF page. when i expand  one page block section the other page block section should get collapse similarly when i expand the other page block section the first page block section should get collapse.
Thanks in advance.
Best Answer chosen by Sadik Shaik 3
Khan AnasKhan Anas (Salesforce Developers) 
Hi Sadik,

Greetings to you. It is a pleasure to be in touch with you again.

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
  
<apex:page >
    <apex:pageBlock id="block1">
        <apex:pageBlockSection id="section1" columns="2" collapsible="true" title="Title 1" onclick="expandCollapse2(); return false;">
            Example Area 1
            Example Area 1
        </apex:pageBlockSection>
        
        <apex:pageBlockSection id="section2" columns="2" collapsible="true" title="Title 2" onclick="expandCollapse1(); return false;">
            Example Area 2
            Example Area 2
        </apex:pageBlockSection>
        
        <script>
        	twistSection(document.getElementById('{!$Component.block1.section2}').getElementsByTagName('img')[0])
        	function expandCollapse1(){
        		twistSection(document.getElementById('{!$Component.block1.section1}').getElementsByTagName('img')[0])
            }
        	function expandCollapse2(){
            	twistSection(document.getElementById('{!$Component.block1.section2}').getElementsByTagName('img')[0])
            }
        </script>
        
    </apex:pageBlock>
</apex:page>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Sadik,

Greetings to you. It is a pleasure to be in touch with you again.

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
  
<apex:page >
    <apex:pageBlock id="block1">
        <apex:pageBlockSection id="section1" columns="2" collapsible="true" title="Title 1" onclick="expandCollapse2(); return false;">
            Example Area 1
            Example Area 1
        </apex:pageBlockSection>
        
        <apex:pageBlockSection id="section2" columns="2" collapsible="true" title="Title 2" onclick="expandCollapse1(); return false;">
            Example Area 2
            Example Area 2
        </apex:pageBlockSection>
        
        <script>
        	twistSection(document.getElementById('{!$Component.block1.section2}').getElementsByTagName('img')[0])
        	function expandCollapse1(){
        		twistSection(document.getElementById('{!$Component.block1.section1}').getElementsByTagName('img')[0])
            }
        	function expandCollapse2(){
            	twistSection(document.getElementById('{!$Component.block1.section2}').getElementsByTagName('img')[0])
            }
        </script>
        
    </apex:pageBlock>
</apex:page>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Sadik Shaik 3Sadik Shaik 3
Hi Khan Anas,

But my requirement is when i load a page the two pageblock sections should be collapsed.Afterthat when i expand one pageblock section the other section should get collapse vice-versa.

Thanks in advance,
Sadik