menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Expandable panel

Call method

  1. Call through custom attributes (if the component is dynamically generated, you need to call mdui.mutation() To initialize)
  2. Call via JavaScript

Related Reading

Material Design Guidelines: Components-Expansion Panel

style

Full HTML structure

This example includes all the HTML elements that can be included.

codeplay_arrow
Example
Trip name
Carribean cruise
keyboard_arrow_down

First content

First content

First content

First content

First content

First content

Location
keyboard_arrow_down

Second content

Second content

Second content

Second content

Second content

Second content

Start and end dates
Start date: Feb 29, 2016
End date: Not set
keyboard_arrow_down

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Trip name</div>
      <div class="mdui-panel-item-summary">Carribean cruise</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Location</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Start and end dates</div>
      <div class="mdui-panel-item-summary">Start date: Feb 29, 2016</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

</div>

Minimal HTML structure

Some of the elements in the above example are not required. The following example only contains the required HTML elements.

codeplay_arrow
Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Panel items opened by default

in <div class="mdui-panel-item"></div> Add a class to the element .mdui-panel-item-open This will make the panel item open by default.

codeplay_arrow
Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Remove panel spacing

in <div class="mdui-panel"></div> Add a class to the element .mdui-panel-gapless You can remove the gap between the open panel and other panels.

codeplay_arrow
Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel mdui-panel-gapless" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Pop-up panel

in <div class="mdui-panel"></div> Add a class to the element .mdui-panel-popout You can make the opened panel have a pop-up effect.

codeplay_arrow
Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel mdui-panel-popout" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Panel nesting

Expandable panels can be nested within each other.

codeplay_arrow
Example
First

First content

First content

First content

First

First content

First content

First content

First

First content

First content

First content

Second

Second content

Second content

Second content

Second

Second content

Second content

Second content

Second

Second content

Second content

Second content

Third

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>

      <!-- 第一个嵌套的可扩展列表 -->
      <div class="mdui-panel" mdui-panel>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>

            <!-- 第二个嵌套的可扩展列表 -->
            <div class="mdui-panel" mdui-panel>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                  <p>First content</p>
                  <p>First content</p>
                  <p>First content</p>
                </div>
              </div>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                  <p>Second content</p>
                  <p>Second content</p>
                  <p>Second content</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Call method

Called by custom attributes

There is no need to write JavaScript code to use this method. Just in <div class="mdui-panel"></div> Add on element mdui-panel="options" Properties to activate the plug-in.

If the component is dynamically generated, you need to call mdui.mutation() Initialize.

codeplay_arrow
Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel="{accordion: true}">
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Some properties can be added to the elements in the extensible panel to bind events, and these properties can also be used when using JavaScript invocation methods.

Attributes Description
mdui-panel-item-close Clicking on the element will trigger close.mdui.panel Event, and close the panel where the element is located.

Call via JavaScript

Instantiate components:

// selector is the CSS selector or DOM element of the .mdui-panel element
// options are the parameters of the plug-in, see the parameter list below
var inst = new mdui.Panel(selector, options);
运行

parameter

parameter name Types of Defaults description
accordion boolean false Whether to enable the accordion effect.
  • for true At most, only one panel item can be open. When one panel item is opened, other panel items will be closed.
  • for false When, multiple panel items can be opened at the same time.

method

Method name description
open(item) Open the panel item.
  • item: The index number of the panel item, or DOM element, or CSS selector.
close(item) Close the panel item.
  • item: The index number of the panel item, or DOM element, or CSS selector.
toggle(item) Switch panel item status.
  • item: The index number of the panel item, or DOM element, or CSS selector.
openAll() Open all panel items. This method is only valid when accordion is false.
closeAll() Close all panel items.

event

event description the goal parameter
open.mdui.panel When the panel item starts to open the animation, the event will be triggered. <div class="mdui-panel-item"></div> event._detail.inst：实例
opened.mdui.panel The event will be triggered when the panel item finishes opening the animation.
close.mdui.panel The event will be triggered when the panel item starts to close the animation.
closed.mdui.panel The event will be triggered when the panel item ends and closes the animation.

List of CSS class names

Class name effect
.mdui-panel Define an expandable panel.
.mdui-panel-gapless Remove the space between the open panel and other panels.
.mdui-panel-popout Make the opened panel have a pop-up effect.
.mdui-panel-item Define an expandable panel panel item.
.mdui-panel-item-open Make the panel item open by default.
.mdui-panel-item-header Define the head of a panel item.
.mdui-panel-item-title Defines the title of the panel item header.
.mdui-panel-item-summary Defines the outline of the panel item header.
.mdui-panel-item-arrow Define the expand and collapse icons for panel items.
.mdui-panel-item-body Define the content of the panel item.
.mdui-panel-item-actions Define the operation bar of the panel item.
arrow_back Previous
Divider
arrow_forward Next
Text box
Set document theme

Theme color

Main color

Accent color