JSFiddle - React, Tailwind, and code Playground

by jakethashi

HTML

<div id="accordian" data-bind="foreach:Categories">
    <div class="panel-heading">
        <h4 class="panel-title"><span data-bind="text: CategoryName"></span></h4>
    </div>
    <div class="panel-body">
        <ul data-bind="foreach:SubCategories">
            <li><a href="#"><span data-bind="text: SubCategoryName" ></span></a></li>
        </ul>
    </div>
 </div>

CSS

ul {
padding:0;
list-style: none;
}

JavaScript

var VM = function() {
    var self = this;
    function ajaxHelper(uri, method, data) {
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function(jqXHR, textStatus, errorThrown) {});
    }
  
    function ajaxHelperFakeResponse(callback) {
      var response = [{
          CategoryName: 'catgeory1',
          SubCategories: [{
            SubCategoryName: 'SubCategoryName1'
          }, {
            SubCategoryName: 'SubCategoryName2'
          }]
        }];
      callback(response);
    }
  
    self.Categories = ko.observableArray([]);

    function getCategories() {
        // fake response
        ajaxHelperFakeResponse(function(data) {
          self.Categories(data);
        });
    }
    getCategories();
};

ko.applyBindings(new VM());