Skip to content

Accordion

Example#

preview

Code-example#

<measmatic-grid> 
  <measmatic-card highlight-header>
    <measmatic-accordion open icon data-ui="accordion1">
      <div>Label Section</div>
      <div>Content Section</div>
    </measmatic-accordion>
    <measmatic-accordion icon data-ui="accordion2">
      <div>Label Section</div>
      <measmatic-input data-id="control1" id="uniqueId" label="variable input" type="float" variables></measmatic-input>
    </measmatic-accordion>
    <measmatic-accordion data-ui="accordion3">
      <div>Label Section</div>
      <div>Content Section</div>
      <div>Content Section</div>
      <div>Content Section</div>
      <div>Content Section</div>
      <div>Content Section</div>
      <div>Content Section</div>
      <div>Content Section</div>
    </measmatic-accordion>
    <measmatic-select data-id="control2" id="uniqueId1" options='["close","open"]' label="trigger accordion"></measmatic-select>
    <measmatic-accordion data-ui="accordion4" control-id="uniqueId1" value="open" icon>
      <div>accordion triggered via Control</div>
      <div>Hello new content!</div>
    </measmatic-accordion>
    <measmatic-input data-id="control3" id="uniqueId2" type="checkbox" label="show hidden Accordion"></measmatic-input>
    <measmatic-accordion data-ui="accordion5" control-id="uniqueId2" value="true">
      <div>Hello new content!</div>
    </measmatic-accordion>
  </measmatic-card>
</measmatic-grid>

Measmatic-accordion#

This custom-element will generate a toggleable label to show and hide content.

Structure 

<measmatic-accordion data-ui="accordion1">
    <div> allways shown element</div>
    <div> hidden Content </div>
</measmatic-accordion>
If there are two child elements in the measmatic-accordion element, the first element will be shown and the second element contains the hidden content. When you want to hide the accordion completely and only show the content when triggered, you can achieve this by using only one child in the measmatic-accordion element.

Manual trigger 

<measmatic-accordion data-ui="test123">
    <div> accordion triggered via Control </div>
    <div> Hello new content </div>
</measmatic-accordion>

Trigger via control 

<measmatic-input data-id="control1" id="uniqueId2" type="checkbox" label="show hidden Accordion"></measmatic-input>
<measmatic-accordion data-ui="accordion1" control-id="uniqueId2" value="true">
    <div>Hello new content!</div>
</measmatic-accordion>

Attributes

  • data-ui required to initialize (for future implementation of syncing the state(open/closed))
  • control-id unique id of the control which triggers this accordion
  • icon enables plus(open)/minus(closed) icon at the right site of the accordion
  • open leaves the accordion open in the initial state
  • value defines the value of the control to open the accordion