Modal accordion based on JSON structure

by Sascha

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/dark-hive/jquery-ui.css">
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

<div id="widget" title="Choose KPIs">

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

#widget {
  border: 3px solid red;
  display: none;
}

JavaScript

let kpis = [{
    "kpi": "Availability",
    "title": "Availability",
    "type": "percent",
    "unit": "%",
    "translationKey": "availability",
    "scope": "Machine",
    "productionOnlyAvailable": true
  },
  {
    "kpi": "Effectiveness",
    "title": "Effectiveness",
    "type": "percent",
    "unit": "%",
    "translationKey": "effectiveness",
    "scope": "Machine",
    "productionOnlyAvailable": true
  },
  {
    "kpi": "MTBF",
    "title": "MTBF",
    "type": "number",
    "unit": "h",
    "translationKey": "mtbf",
    "scope": "Machine",
    "productionOnlyAvailable": true
  },
  {
    "kpi": "MTTR",
    "title": "MTTR",
    "type": "number",
    "unit": "h",
    "translationKey": "mttr",
    "scope": "Machine",
    "productionOnlyAvailable": true
  },
  {
    "kpi": "OEE",
    "title": "OEE",
    "type": "percent",
    "unit": "%",
    "translationKey": "oee",
    "scope": "Machine",
    "productionOnlyAvailable": true
  },
  {
    "kpi": "ProducedQuantity",
    "title": "Produced quantity",
    "type": "number",
    "unit": "packs",
    "translationKey": "produced_quantity",
    "scope": "Machine",
    "productionOnlyAvailable": true
  },
  {
    "kpi": "ProducedGood",
    "title": "Produced good quantity",
    "type": "number",
    "unit": "packs",
    "translationKey": "produced_good_quantity",
    "scope": "Machine",
    "productionOnlyAvailable": true
  },
  {
    "kpi": "ProducedDefective",
    "title": "Produced defective quantity",
    "type": "number",
    "unit": "packs",
    "translationKey": "produced_defective_quantity",
    "scope": "Machine",
    "productionOnlyAvailable": true
  },
  {
    "kpi": "Quality",
    "title": "Quality",
    "type": "percent",
    "unit": "%",
    "translationKey": "quality",
    "scope": "Machine",
    "productionOnlyAvailable": true
  },
  {
    "kpi": "ScrapRatio",
    "title": "Scrap ratio",
    "type": "percent",
    "unit": "%",
    "translationKey": "scrap_ratio",
    "scope": "Machine",
   ...