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(closed)/minus(open) 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