SFDC：pageBlockTableの折りたたみ - tyoshikawa1106のブログ

Force.com Discussion Boardsにpageblocktableで折りたたんだ状態で表示したいと

投稿があり、多分Javascriptでできるかなと思って調べてみました。

一応document.getElementByIdと.style.display = "none";で対応できました。

ソースはこんな感じです。

<apex:page Controller="PageBlockTableHideController" id="pageId">
    <apex:form id="formId">
        <apex:pageBlock id="blockId">
            <apex:pageBlockTable value="{!objAccounts}" var="item" id="tableId" onClick="tableClick();">
                <apex:column headerValue="{!$ObjectType.Account.Fields.Name.Label}">
                    <apex:outputField value="{!item.Name}"/>
                </apex:column>
                <apex:column headerValue="{!$ObjectType.Account.Fields.AccountNumber.Label}">
                    <apex:outputField value="{!item.AccountNumber}"/>
                </apex:column>
                <apex:column headerValue="{!$ObjectType.Account.Fields.Site.Label}">
                    <apex:outputField value="{!item.Site}"/>
                </apex:column>
                <apex:column headerValue="{!$ObjectType.Account.Fields.Industry.Label}">
                    <apex:outputField value="{!item.Industry}"/>
                </apex:column>
            </apex:pageBlockTable> 
        </apex:pageBlock>
    </apex:form>
    <script>
    
        var element = document.getElementById('pageId:formId:blockId:tableId:tb');
        element.style.display = "none";
        
        function tableClick() {
            
            if (element.style.display == "none") {
                element.style.display = "";
            } else {
                element.style.display = "none";
            }
            
            return false;
        }
        
    </script>
</apex:page>