function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Trisha HinojosaTrisha Hinojosa 

Collapse <apex:dataTable>

Hello,

I am using a data table within a card. I would like to be able to collapse the table without having to use javascipt, just like I can with page block sections.

Any Ideas?

E.g., page block section:

...
<apex:pageBlockSection id="pg1" collapsible="true" title="Matters" columns="1">
<apex:pageblockTable value="{!result4}" var="matt">
            <apex:column headerValue="Matter Name">                    
                <apex:outputLink value="/{!matt.Id}" target="_blank">{!matt.name}</apex:outputLink>
             </apex:column>
...

E.g., data table. Begins after  <!-- /Make Collapsible ???-->    

...
<!-- MATTER TABLE -->
<!-- HEADER CARD WITH ONE ACTION AND DATA TABLE -->
    <article class="slds-card">
          <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
              <div class="slds-media__figure">
                <span class="slds-icon_container slds-icon-custom-custom90" title="Matters">
                      <svg class="slds-icon slds-icon_small" aria-hidden="true">
                        <use xlink:href="/assets/icons/custom-sprite/svg/symbols.svg#custom90"></use>
                      </svg>
                          <span class="slds-assistive-text">Matter</span>
                </span>
              </div>
                  <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                        <span class="slds-text-heading_small">Matters</span>
                    </h2>
                  </div>
                      <div class="slds-no-flex">
                    <apex:form >     
                               <apex:commandButton styleClass="slds-button slds-button--brand slds-not-selected" value="Export To Excel" action="/apex/MatterFetch"/>
                    </apex:form>     
                      </div>
            </header>
          </div>
<!-- / HEADER CARD-->
    <div class="slds-card__body slds-card__body_inner"> bla bla bla.</div>
      <div class="slds-card__body">


 <!-- /Make Collapsible ???-->          
      
      <apex:dataTable value="{!result4}" var="matt" styleClass="slds-table slds-table_bordered slds-is-selected slds-has-flexi-truncate">
            <apex:column headerValue="Matter Name">                    
                <apex:outputLink value="/{!matt.Id}" target="_blank">{!matt.name}</apex:outputLink>
             </apex:column>
...