JSFiddle - React, Tailwind, and code Playground

by gedave

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<script src="http://localhost/menuTest2/CollapsibleLists.js"></script>
<div class="pOut" id="MR_QSP">
  <table  style="font-weight: bold">
    <tr>
      <td style="border: 4px solid green"><div style="text-align: center; color: #ffffff; font-weight: bold; background-color: green;"> 
      <b id="QKcap">Quick Split</b></div>
        <ul class="collapsibleList">
          <li>Magnet Enclosure / Patient Comfort
            <ul style="margin-top: 0">
              <li id="MR_QSP1">Bore Light</li>
              <li id="MR_QSP17">Bore Light - Patient dislodged</li>
              <li id="MR_QSP2">Alignment Light</li>
              <li id="MR_QSP3">Bore Temp Sensor</li>
              <li id="MR_QSP4">Patient Alert</li>
              <li id="MR_QSP5">PAC</li>
            </ul>
          </li>
          <li>Coils Bias / Hardware
            <ul style="margin-top: 0">
              <li id="MR_QSP6">Bias</li>
              <li id="MR_QSP7">Coil ID</li>
              <li id="MR_QSP8">Coil Hardware</li>
              <li id="MR_QSP9">Applications Issue</li>
            </ul>
          </li>
          <li>Patient Handling
            <ul style="margin-top: 0">
              <li id="MR_QSP10">Table Mechanics</li>
              <li id="MR_QSP11">Table Hardware</li>
              <li id="MR_QSP12">Cradle adjustment</li>
              <li id="MR_QSP16">Cradle wheel</li>
              <li id="MR_QSP13">Longitudinal Drive</li>
              <li id="MR_QSP14">Home Sensor</li>
              <li id="MR_QSP15">Docking Assembly</li>
            </ul>
          </li>
          <li>Administrative
            <ul style="margin-top: 0">
              <li id="MR_QSP18">Administrative</li>
            </ul>
          </li>
        </ul></td>
    </tr>
  </table>

JavaScript

getItem();
CollapsibleLists.apply();




function getItem() {
    var getSource = document.getElementById("MR_QSP");
    var listItems = getSource.getElementsByTagName('li');
        console.log(listItems);
    for (var i = 0; i < listItems.length; i++) {
        listItems[i].onclick = function (e) {
            e.stopPropagation();
            console.log(e.target.id);
        }
    }
}