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

Collapse Collapse content block plugin

Collapse Plugins are used to collapse or expand content blocks.

The plug-in itself does not have any styles, you need to write styles yourself or use them in conjunction with other components.

Call method

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

HTML structure

This is the most basic HTML structure:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Add class .mdui-collapse-item-open 

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Containing class .mdui-collapse-item-arrow The element of will be flipped when the content block expands 180 degree:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Call method

Called by custom attributes

No need to write in this way JavaScript Code. Just in <div class="mdui-collapse"></div> Add on element mdui-collapse="options" Properties to activate the plug-in.

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

codeplay_arrow
Example

item1

item1 content

item1 content

item1 content

subitem1

subitem1 content

subitem1 content

subitem1 content

item2

item2 content

item2 content

item2 content

item3

item3 content

item3 content

item3 content

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

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"><p><a href="javascript:;">item1</a></p></div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- Nested elements -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header"><p><a href="javascript:;">subitem1</a></p></div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"><p><a href="javascript:;">item2</a></p></div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"><p><a href="javascript:;">item3</a></p></div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

in CollapseSome attributes can be added to the elements inside to bind events, and these attributes are in For use JavaScript It can also be used when calling mode.

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

by JavaScript transfer

Instantiate the plug-in:

// selector ElementalSelector or Selector element DOM element
// options Is the parameter of the plug-in, see the parameter list below
var inst = new mdui.Collapse(selector, options);
demo

parameter

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

method

Method name description
open(item) Open the content block.
  • item: The index number of the content block, or DOM Element, or CSS Selector.
close(item) Close the content block.
  • item: The index number of the content block, or DOM Element, or CSS Selector.
toggle(item) Toggles the status of the content block.
  • item: The index number of the content block, or DOM Element, or CSS Selector.
openAll() Open all content blocks. This method is only available in accordion for false Time effective.
closeAll() Close all content blocks.

event

event description the goal parameter
open.mdui.collapse The event will be triggered when the content block starts to open the animation. <div class="mdui-collapse-item"></div> event._detail.inst: Examples
opened.mdui.collapse When the content block ends and opens the animation, the event will be triggered.
close.mdui.collapse The event will be triggered when the content block starts to close the animation.
closed.mdui.collapse When the content block ends and closes the animation, the event will be triggered.

More examples

Sublist

code
Example
  • home
    Home
  • dashboard
    Dashboard
  • people
    Audience
    keyboard_arrow_down
    • Overview
    • Language
    • Location
    • New vs Returning
  • device_hub
    Acquisition
    keyboard_arrow_down
    • Overview
    • All Traffic
    • Direct Traffic
    • Search Overview
  • touch_app
    Behavior
    keyboard_arrow_down
    • Overview
    • All Pages
    • Landing Pages
    • Exit Pages
  • shopping_cart
    Ecommerce
<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>
arrow_back Previous
Progress indicator
arrow_forward Next
Headroom
Set document theme

Theme color

Main color

Accent color