Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

TRUST A parent Sobject, Brand(Brilique) and objective tactic and Action are grand Child Sobject

Can we achieve the cascading pageblock section style in Visual-force page? let user click on (+) corresponding subsection should expand in fashion in image attached.

share|improve this question

2 Answers 2

You can nest apex:pageBlockSection elements and the section open/close behaves as you would expect.

For example, just create this page and try it:

<apex:page tabStyle="Contact">
    <apex:pageBlock>
        <apex:pageBlockSection title="One" columns="1">
            <apex:outputText value="Content"/>
            <apex:pageBlockSection title="One Child 1" columns="1">
                <apex:outputText value="Content"/>
                <apex:pageBlockSection title="One Child 1 Grandchild 1" columns="1">
                    <apex:outputText value="Content"/>
                </apex:pageBlockSection>
                <apex:pageBlockSection title="One Child 2 Grandchild 2" columns="1">
                    <apex:outputText value="Content"/>
                </apex:pageBlockSection>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="One Child 2" columns="1">
                <apex:outputText value="Content"/>
            </apex:pageBlockSection>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="Two" columns="1">
            <apex:outputText value="Content"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

But your screen shot shows something that in no way matches the styling that Visualforce provides out of the box, so if that is important you might be better off embedding some other technology in the Visualforce page such as one of these jQuery Treeview Plugin & Tutorials with Example.

share|improve this answer

Here's a very rough javascript example on how to do this using jquery.

Working Demo

Javascript

function collapseMeAndChildren(collapseThis){
    $collapseThisSection = $(collapseThis);
    $collapseThisParent = $collapseThisSection.parent();
    $collapseThisParent.children().each(function(){
         if(this.getAttribute('class') == 'collapseThis')
             $(this).toggle();
    });
}

html

<div>
    <a href="#" onclick="collapseMeAndChildren(this);"><img src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/black-white-pearls-icons-alphanumeric/069303-black-white-pearl-icon-alphanumeric-plus-sign3-sc48.png" height="20px" width="20px" /></a> 
    Title
    <div class="collapseThis"> 
        <a href="#" onclick="collapseMeAndChildren(this);"><img src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/black-white-pearls-icons-alphanumeric/069303-black-white-pearl-icon-alphanumeric-plus-sign3-sc48.png" height="20px" width="20px" /></a>
        1
        <div class="collapseThis">
            <a href="#" onclick="collapseMeAndChildren(this);"><img src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/black-white-pearls-icons-alphanumeric/069303-black-white-pearl-icon-alphanumeric-plus-sign3-sc48.png" height="20px" width="20px" /></a>
            2
            <div class="collapseThis" onclick="collapseMeAndChildren(this);">
                3
            </div>
        </div>  
    </div>
</div>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.