JSFiddle - React, Tailwind, and code Playground

by gedave

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<ul id="cMenu" class="collapsibleList">
    <li>Parent item 1
        <ul>
            <li class="item" id="item1">Child item 1</li>
            <li class="item" id="item2">Child item 2</li>
        </ul>
    </li>
    <li>Parent item 2
        <ul>
            <li class="item" id="item3">Child item 3</li>
            <li class="item" id="item4">Child item 4</li>
        </ul>
    </li>
</ul>

JavaScript

loadCL();

CollapsibleLists.apply();

var cList = document.getElementById("cMenu"),
    cItem = cList.getElementsByTagName("li");

for (var i in cItem) {
    if (cItem[i].className == "item") {
        cItem[i].onclick = function (event) {
            event.stopPropagation();
            var elm = event.currentTarget || event.srcElement;
            console.log(elm.id);
        }
    }
}






function loadCL (){
    console.log('Collapsing');
var CollapsibleLists =
    new function(){

      /* Makes all lists with the class 'collapsibleList' collapsible. The
       * parameter is:
       *
       * doNotRecurse - true if sub-lists should not be made collapsible
       */
      this.apply = function(doNotRecurse){

        // loop over the unordered lists
        var uls = document.getElementsByTagName('ul');
        for (var index = 0; index < uls.length; index ++){

          // check whether this list should be made collapsible
          if (uls[index].className.match(/(^| )collapsibleList( |$)/)){

            // make this list collapsible
            this.applyTo(uls[index], true);

            // check whether sub-lists should also be made collapsible
            if (!doNotRecurse){

              // add the collapsibleList class to the sub-lists
              var subUls = uls[index].getElementsByTagName('ul');
              for (var subIndex = 0; subIndex < subUls.length; subIndex ++){
                subUls[subIndex].className += ' collapsibleList';
              }

            }

          }

        }

      };

      /* Makes the specified list collapsible. The parameters are:
       *
       * node         - the list element
       * doNotRecurse - true if sub-lists should not be made collapsible
       */
      this.applyTo = function(node, doNotRecurse){

        // loop over the list items within this node
        var lis = node.getElementsByTagName('li');
        for (var index = 0; index < lis.length; index ++){

          // check whether this...