JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<ul id="menuHolder">
    <li data-bind="click: showMenu.bind($data, 1)"> 
         Main menu item
        <ul class="submenu" data-bind="visible: selected() == '1'">
            <li>
               <a class="sub-item" href="http://google.co.nz" target="_blank" data-bind="click: function(){ return true }, clickBubble: false">
                    Submenu item
               </a>
             </li>
        </ul>
    </li>
 </ul>

JavaScript

var menuModel = function () {
    var self = this;
    self.selected = ko.observable(0);        
    self.showMenu = function (data) {
        var s = self.selected();
        if (s > 0 && data == s)
            self.selected(0);
        else
            self.selected(data);    
    };     
}
ko.applyBindings(new menuModel(), document.getElementById("menuHolder"));