Expander Panel

Expander Panel succeeds the earlier Table Panel, with more flexibility.

Page panels enclose an ACE Header and ACE Table, creating a pattern that can display a set of tables; with optional expand/collapse functionality. An ACE Lozenge or ACE text can be used to indicate the number of rows in the table.

Default

3 People
Status Name Foo Bar
Disabled David Clarence Boooooooooooooooon [email protected] Foo Bar
Disabled Aussie Grit [email protected] Foo Bar
Disabled Shane Webcke [email protected] Foo Bar

Administrators

Accountants

Advisors

Simple version of expander panel

Default

3 People
Status Name Foo Bar
Disabled David Clarence Boooooooooooooooon [email protected] Foo Bar
Disabled Aussie Grit [email protected] Foo Bar
Disabled Shane Webcke [email protected] Foo Bar

Simple with the emphasis header type

Default
3 People
Status Name Foo Bar
Disabled David Clarence Boooooooooooooooon [email protected] Foo Bar
Disabled Aussie Grit [email protected] Foo Bar
Disabled Shane Webcke [email protected] Foo Bar

Markup

Example Comment Code

Default

Expander content.

 By default, content will be expanded. 

                                                                                                  <div class="ace-expander ace-expander-panel ace-expander-expanded" id="demo-simple-expander-expandeddefault">
                                                                                                        <div class="ace-header ace-group ace-group-split ace-expander-header" tabindex="0">
                                                                                                              <div class="ace-item ace-header-main">
                                                                                                                <h2 tabindex="-1" class="ace-h2 ace-expander-heading">Simple (expanded via default)</h2>
                                                                                                              </div>
                                                                                                        </div>
                                                                                                    <div aria-hidden="false" class="ace-expander-content">
                                                                                                      <!-- Expander content.-->
                                                                                                    </div>
                                                                                                  </div>

Preset


                                                                                              <% ace.PresetExpanderPanel(Array(_
                                                                                                "id", "demo-simple-expander-expandeddefault",_
                                                                                                "headerText", "SIMPLE"_
                                                                                              )) %>
                                                                                                <!-- Expander content. -->
                                                                                              <% ace.PresetExpanderPanelEnd %>

Manual


                                                                                              <% ace.ExpanderPanel(Array(_
                                                                                                "id", "demo-simple-expander-expandeddefault"_
                                                                                              ))
                                                                                                ace.ExpanderPanelHeaderGroup(Array())
                                                                                                  ace.ExpanderPanelHeaderMainItem(Array(_
                                                                                                  "text", "SIMPLE"_
                                                                                                  ))
                                                                                                    ace.ExpanderPanelHeaderMainItemEnd
                                                                                                      ace.ExpanderPanelHeaderControlItem(Array())
                                                                                                      ace.Lozenge(Array(_
                                                                                                        "customClass", "ace-expander-panel-counter"_
                                                                                                      ))
                                                                                                    ace.ExpanderPanelHeaderControlItemEnd
                                                                                                ace.ExpanderPanelHeaderGroupEnd
                                                                                                ace.ExpanderPanelContent(Array())
                                                                                                %>
                                                                                                  <p>Expander content.</p>
                                                                                                <% ace.ExpanderPanelContentEnd
                                                                                                ace.ExpanderPanelEnd %>

Simple (collapsed)

 To set the expander to collapsed, put the class on the outside and set the content's aria-hidden attribute to true. 

                                                                                                  <div class="ace-expander ace-expander-panel ace-expander-collapsed" id="test-simple-expander-collapsed">
                                                                                                        <div class="ace-header ace-group ace-group-split ace-expander-header" tabindex="0">
                                                                                                              <div class="ace-item ace-header-main">
                                                                                                                <h2 tabindex="-1" class="ace-h2 ace-expander-heading">Simple (collapsed)</h2>
                                                                                                              </div>
                                                                                                        </div>
                                                                                                    <div aria-hidden="true" class="ace-expander-content">
                                                                                                      <!-- Expander content.-->
                                                                                                    </div>
                                                                                                  </div>

Preset


                                                                                              <% ace.PresetExpanderPanel(Array(_
                                                                                                "id", "demo-simple-expander-expandeddefault",_
                                                                                                "expanded", false,_
                                                                                                "headerText", "Simple (collapsed)"_
                                                                                              )) %>
                                                                                                <!-- Expander content. -->
                                                                                              <% ace.PresetExpanderPanelEnd %>

Manual


                                                                                              <% ace.ExpanderPanel(Array(_
                                                                                                "id", "demo-simple-expander-expandeddefault",_
                                                                                                "expanded", false _
                                                                                              ))
                                                                                                ace.ExpanderPanelHeaderGroup(Array())
                                                                                                  ace.ExpanderPanelHeaderMainItem(Array(_
                                                                                                  "text", "Simple (collapsed)"_
                                                                                                  ))
                                                                                                    ace.ExpanderPanelHeaderMainItemEnd
                                                                                                      ace.ExpanderPanelHeaderControlItem(Array())
                                                                                                      ace.Lozenge(Array(_
                                                                                                        "customClass", "ace-expander-panel-counter"_
                                                                                                      ))
                                                                                                    ace.ExpanderPanelHeaderControlItemEnd
                                                                                                ace.ExpanderPanelHeaderGroupEnd
                                                                                                ace.ExpanderPanelContent(Array("expanded", false))
                                                                                                %>
                                                                                                  <!-- Expander content. -->
                                                                                                <% ace.ExpanderPanelContentEnd
                                                                                                ace.ExpanderPanelEnd %>

Preset counter

Table Heading
Table Row 1
Table Row 2
To count visible ACE table rows, set the data-ace-counter-preset attribute to tableRows. Where both a preset and a custom counter are set, the custom counter will override the preset. 

                                                                                                  <div class="ace-expander ace-expander-panel ace-expander-expanded" id="demo-counter-expander-tables" data-ace-counter-preset="tableRows">
                                                                                                        <div class="ace-header ace-group ace-group-split ace-expander-header" tabindex="0">
                                                                                                              <div class="ace-item ace-header-main">
                                                                                                                <h2 tabindex="-1" class="ace-h2 ace-expander-heading">Table counter</h2>
                                                                                                              </div>
                                                                                                              <div class="ace-item ace-header-controls">
                                                                                                                    <div class="ace-lozenge ace-expander-panel-counter"><span></span>
                                                                                                                    </div>
                                                                                                              </div>
                                                                                                        </div>
                                                                                                    <div aria-hidden="false" class="ace-expander-content">
                                                                                                      <!-- ACE Table goes here-->
                                                                                                    </div>
                                                                                                  </div>

Preset


                                                                                              <% ace.PresetExpanderPanel(Array(_
                                                                                                "id", "demo-counter-expander-tables",_
                                                                                                "counterPreset", "tableRows",_
                                                                                                "headerText", "Table counter"_
                                                                                              )) %>
                                                                                                <!-- ACE Table goes here -->
                                                                                              <% ace.PresetExpanderPanelEnd %>

Manual


                                                                                              <% ace.ExpanderPanel(Array(_
                                                                                                "id", "demo-simple-expander-expandeddefault",_
                                                                                                "counterPreset", "tableRows"_
                                                                                              ))
                                                                                                ace.ExpanderPanelHeaderGroup(Array())
                                                                                                  ace.ExpanderPanelHeaderMainItem(Array(_
                                                                                                  "text", "Table counter"_
                                                                                                  ))
                                                                                                    ace.ExpanderPanelHeaderMainItemEnd
                                                                                                      ace.ExpanderPanelHeaderControlItem(Array())
                                                                                                      ace.Lozenge(Array(_
                                                                                                        "customClass", "ace-expander-panel-counter"_
                                                                                                      ))
                                                                                                    ace.ExpanderPanelHeaderControlItemEnd
                                                                                                ace.ExpanderPanelHeaderGroupEnd
                                                                                                ace.ExpanderPanelContent(Array())
                                                                                                %>
                                                                                                  <!-- ACE Table goes here -->
                                                                                                <% ace.ExpanderPanelContentEnd
                                                                                                ace.ExpanderPanelEnd %>

Custom counter

Expander content.

For a custom counter, set the data-ace-counter-selector attribute to a selector that identifies the elements you want to count. For the demonstration, will count the number of p elements. 

                                                                                                  <div class="ace-expander ace-expander-panel ace-expander-expanded" id="demo-counter-expander-paragraphs" data-ace-counter-selector="p">
                                                                                                        <div class="ace-header ace-group ace-group-split ace-expander-header" tabindex="0">
                                                                                                              <div class="ace-item ace-header-main">
                                                                                                                <h2 tabindex="-1" class="ace-h2 ace-expander-heading">Custom counter</h2>
                                                                                                              </div>
                                                                                                              <div class="ace-item ace-header-controls">
                                                                                                                    <div class="ace-lozenge ace-expander-panel-counter"><span></span>
                                                                                                                    </div>
                                                                                                              </div>
                                                                                                        </div>
                                                                                                    <div aria-hidden="false" class="ace-expander-content">
                                                                                                      <!-- Expander content.-->
                                                                                                    </div>
                                                                                                  </div>

Preset


                                                                                              <% ace.PresetExpanderPanel(Array(_
                                                                                                "id", "demo-counter-expander-paragraphs",_
                                                                                                "counterSelector", "p",_
                                                                                                "headerText", "CUSTOM COUNTER"_
                                                                                              )) %>
                                                                                                <!-- Expander content. -->
                                                                                              <% ace.PresetExpanderPanelEnd %>

Manual


                                                                                              <% ace.ExpanderPanel(Array(_
                                                                                                "id", "demo-counter-expander-paragraphs",_
                                                                                                "counterSelector", "p"_
                                                                                              ))
                                                                                                ace.ExpanderPanelHeaderGroup(Array())
                                                                                                  ace.ExpanderPanelHeaderMainItem(Array(_
                                                                                                  "text", "CUSTOM COUNTER"_
                                                                                                  ))
                                                                                                    ace.ExpanderPanelHeaderMainItemEnd
                                                                                                      ace.ExpanderPanelHeaderControlItem(Array())
                                                                                                      ace.Lozenge(Array(_
                                                                                                        "customClass", "ace-expander-panel-counter"_
                                                                                                      ))
                                                                                                    ace.ExpanderPanelHeaderControlItemEnd
                                                                                                ace.ExpanderPanelHeaderGroupEnd
                                                                                                ace.ExpanderPanelContent(Array())
                                                                                                %>
                                                                                                  <!-- Expander content. -->
                                                                                                <% ace.ExpanderPanelContentEnd
                                                                                                ace.ExpanderPanelEnd %>

Ace text

14 People

Expander content.

 An ACE text element can be used to display content. In this case, no data-ace-counter-selector attribute has been set and the content has been written manually. 

                                                                                                  <div class="ace-expander ace-expander-panel ace-expander-expanded" id="demo-acetext-counter">
                                                                                                        <div class="ace-header ace-group ace-group-split ace-expander-header" tabindex="0">
                                                                                                              <div class="ace-item ace-header-main">
                                                                                                                <h2 tabindex="-1" class="ace-h2 ace-expander-heading">Ace text counter</h2>
                                                                                                              </div>
                                                                                                              <div class="ace-item ace-header-controls"><span class="ace-text">14 People</span>
                                                                                                              </div>
                                                                                                        </div>
                                                                                                    <div aria-hidden="false" class="ace-expander-content">
                                                                                                    </div>
                                                                                                  </div>

Arbitrary counter

12345

This content has no impact on the counter.

 To set the counter manually, ensure that no data-ace-counter-selector attribute has been set; and simply write the content of the lozenge. 

                                                                                                  <div class="ace-expander ace-expander-panel ace-expander-expanded" id="demo-counter-expander-arbitrary">
                                                                                                        <div class="ace-header ace-group ace-group-split ace-expander-header" tabindex="0">
                                                                                                              <div class="ace-item ace-header-main">
                                                                                                                <h2 tabindex="-1" class="ace-h2 ace-expander-heading">Arbitrary counter</h2>
                                                                                                              </div>
                                                                                                              <div class="ace-item ace-header-controls">
                                                                                                                    <div class="ace-lozenge ace-expander-panel-counter"><span>12345</span>
                                                                                                                    </div>
                                                                                                              </div>
                                                                                                        </div>
                                                                                                    <div aria-hidden="false" class="ace-expander-content">
                                                                                                      <!-- This content has no impact on the counter.-->
                                                                                                    </div>
                                                                                                  </div>

Preset


                                                                                              <% ace.PresetExpanderPanel(Array(_
                                                                                                "id", "demo-counter-expander-arbitrary",_
                                                                                                "headerText", "Arbitrary counter",_
                                                                                                "counterText", "12345"_
                                                                                              )) %>
                                                                                                <!-- This content has no impact on the counter. -->
                                                                                              <% ace.PresetExpanderPanelEnd %>

Manual


                                                                                    <% ace.ExpanderPanel(Array(_
                                                                                      "id", "demo-counter-expander-arbitrary"_
                                                                                    ))
                                                                                      ace.ExpanderPanelHeaderGroup(Array())
                                                                                        ace.ExpanderPanelHeaderMainItem(Array(_
                                                                                        "text", "Arbitrary counter"_
                                                                                        ))
                                                                                          ace.ExpanderPanelHeaderMainItemEnd
                                                                                            ace.ExpanderPanelHeaderControlItem(Array())
                                                                                            ace.Lozenge(Array(_
                                                                                              "customClass", "ace-expander-panel-counter",_
                                                                                              "text", "12345"_
                                                                                            ))
                                                                                          ace.ExpanderPanelHeaderControlItemEnd
                                                                                      ace.ExpanderPanelHeaderGroupEnd
                                                                                      ace.ExpanderPanelContent(Array())
                                                                                      %>
                                                                                       <!-- This content has no impact on the counter. -->
                                                                                      <% ace.ExpanderPanelContentEnd
                                                                                      ace.ExpanderPanelEnd %>

Coloured border

Expander content.

 To set a spot colour on the left-hand border, either set CSS via the ID or a custom class (recommended method); or set a style="border-color: #f00" attribute inline.

Using ID:


                                                                                              <style>#demo-simple-expander-coloured { border-color: #f00; }</style>

                                                                                                  <div class="ace-expander ace-expander-panel ace-expander-expanded" id="demo-simple-expander-coloured" style="border-color:#f00">
                                                                                                        <div class="ace-header ace-group ace-group-split ace-expander-header" tabindex="0">
                                                                                                              <div class="ace-item ace-header-main">
                                                                                                                <h2 tabindex="-1" class="ace-h2 ace-expander-heading">Coloured border</h2>
                                                                                                              </div>
                                                                                                        </div>
                                                                                                    <div aria-hidden="false" class="ace-expander-content">
                                                                                                      <!-- Expander content.-->
                                                                                                    </div>
                                                                                                  </div>

Inline:


                                                                                                  <div class="ace-expander ace-expander-panel ace-expander-expanded" id="demo-simple-expander-coloured" style="border-color:#f00">
                                                                                                        <div class="ace-header ace-group ace-group-split ace-expander-header" tabindex="0">
                                                                                                              <div class="ace-item ace-header-main">
                                                                                                                <h2 tabindex="-1" class="ace-h2 ace-expander-heading">Coloured border</h2>
                                                                                                              </div>
                                                                                                        </div>
                                                                                                    <div aria-hidden="false" class="ace-expander-content">
                                                                                                      <!-- Expander content.-->
                                                                                                    </div>
                                                                                                  </div>

Preset Inline


                                                                                              <% ace.PresetExpanderPanel(Array(_
                                                                                                "id", "demo-simple-expander-coloured",_
                                                                                                "headerText", "Coloured border",_
                                                                                                "colour", "#f00"_
                                                                                              )) %>
                                                                                                <!--Expander content.-->
                                                                                              <% ace.PresetExpanderPanelEnd %>

Manual Inline


                                                                                              <% ace.ExpanderPanel(Array(_
                                                                                                "id", "demo-simple-expander-coloured",_
                                                                                                "colour", "#f00"_
                                                                                              ))
                                                                                                ace.ExpanderPanelHeaderGroup(Array())
                                                                                                  ace.ExpanderPanelHeaderMainItem(Array(_
                                                                                                  "text", "Coloured border"_
                                                                                                  ))
                                                                                                    ace.ExpanderPanelHeaderMainItemEnd
                                                                                                      ace.ExpanderPanelHeaderControlItem(Array())
                                                                                                      ace.Lozenge(Array(_
                                                                                                        "customClass", "ace-expander-panel-counter"_
                                                                                                      ))
                                                                                                    ace.ExpanderPanelHeaderControlItemEnd
                                                                                                ace.ExpanderPanelHeaderGroupEnd
                                                                                                ace.ExpanderPanelContent(Array())
                                                                                                %>
                                                                                                  <!-- Expander content. -->
                                                                                                <% ace.ExpanderPanelContentEnd
                                                                                                ace.ExpanderPanelEnd %>

Preset By ID

<style>#demo-simple-expander-coloured { border-color: #f00; }</style>

                                                                                              <% ace.PresetExpanderPanel(Array(_
                                                                                                "id", "demo-simple-expander-coloured",_
                                                                                                "headerText", "Coloured border",_
                                                                                              )) %>
                                                                                                <!-- Expander content. -->
                                                                                              <% ace.PresetExpanderPanelEnd %>

Manual By ID

<style>#demo-simple-expander-coloured { border-color: #f00; }</style>

                                                                                              <% ace.ExpanderPanel(Array(_
                                                                                                "id", "demo-simple-expander-coloured"_
                                                                                              ))
                                                                                                ace.ExpanderPanelHeaderGroup(Array())
                                                                                                  ace.ExpanderPanelHeaderMainItem(Array(_
                                                                                                  "text", "Coloured border"_
                                                                                                  ))
                                                                                                    ace.ExpanderPanelHeaderMainItemEnd
                                                                                                      ace.ExpanderPanelHeaderControlItem(Array())
                                                                                                      ace.Lozenge(Array(_
                                                                                                        "customClass", "ace-expander-panel-counter"_
                                                                                                      ))
                                                                                                    ace.ExpanderPanelHeaderControlItemEnd
                                                                                                ace.ExpanderPanelHeaderGroupEnd
                                                                                                ace.ExpanderPanelContent(Array())
                                                                                                %>
                                                                                                 <!-- Expander content. -->
                                                                                                <% ace.ExpanderPanelContentEnd
                                                                                                ace.ExpanderPanelEnd %>

Javascript

Methods

To initialise Expander Panels, use the init method, eg:


                                    $(document).ready(function(){
                                      ACE.ExpanderPanel.init();
                                    });

This will ensure all tables are hidden or shown according to the outer classname; and enables expand/collapse via click on the heading or counter.

Optional Methods

Function Arguments Description Example
update jQuery element or selector Update the Expander Panel, in effect this will reset the count of visible table rows. 
ACE.ExpanderPanel.update('#yourid');
toggle jQuery element or selector Toggle the table(s) matching the jQuery selector. If they are expanded, they will be collapsed; and vice versa. 
ACE.ExpanderPanel.toggle('#yourid');
expand jQuery element or selector Expand the table(s) matching the jQuery selector. 
ACE.ExpanderPanel.expand('#yourid');
collapse jQuery element or selector Collapse the table(s) matching the jQuery selector. 

                                                                    ACE.ExpanderPanel.collapse('#yourid');

Events

Event Description Usage Example
ACE.ExpanderPanel.Updated Fires when an Expander Panel has been updated. Passes an object with counterValue. For panels with no counter, the counterValue will be false. 

                                                                    $(document).on('ACE.ExpanderPanel.Updated', function(e, details){
                                                                      console.log(e.target);
                                                                      console.log('#' + e.target.id + ' counter updated to ' + details.counterValue);
                                                                    });
ACE.ExpanderPanel.Toggled Fires when an Expander Panel has been expanded or collapsed. Passes an object with the new state. 

                                                                    $(document).on('ACE.ExpanderPanel.Toggled', function(e, details){
                                                                      console.log(e.target);
                                                                      console.log('#' + e.target.id + ' has been toggled to' + details.state);
                                                                    });