Expander

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 is used to indicate the number of rows in the table.

Administrators

Status Name Foo Bar
Disabled David Clarence Boooooooooooooooon boonie@launcestonheroes.com.au Foo Bar
Disabled Aussie Grit notbad@numbertwodriver.com Foo Bar
Disabled Shane Webcke warhorse@broncos.com Foo Bar

Accountants

Advisors

Markup

Example Comment Code

Simple

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">
                                                                                                  <div class="ace-item ace-header-main">
                                                                                                    <h2 class="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">
                                                                                                  <div class="ace-item ace-header-main">
                                                                                                    <h2 class="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">
                                                                                                  <div class="ace-item ace-header-main">
                                                                                                    <h2 class="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

 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">
                                                                                                  <div class="ace-item ace-header-main">
                                                                                                    <h2 class="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 %>

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">
                                                                                                  <div class="ace-item ace-header-main">
                                                                                                    <h2 class="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">
                                                                                                  <div class="ace-item ace-header-main">
                                                                                                    <h2 class="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">
                                                                                                  <div class="ace-item ace-header-main">
                                                                                                    <h2 class="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.Updated', function(e, details){
                                                          console.log(e.target);
                                                          console.log('#' + e.target.id + ' counter updated to ' + details.state);
                                                        });