diff --git a/app/assets/javascripts/addorder.js b/app/assets/javascripts/addorder.js
index 5cacee2e..0439efcb 100755
--- a/app/assets/javascripts/addorder.js
+++ b/app/assets/javascripts/addorder.js
@@ -73,8 +73,9 @@ $(function() {
   }
   //end show list function
   //click menu sidebar menu category
-  $(".menu_category").on("click", function(){
-    var menu_id = $(this).find(".menu-id").text();
+  // $(".menu_category").on("click", function(){
+  $(document).on('click', '.menu_category', function(event){
+    var menu_id = $(this).attr("data-id");
     var url = "get_menu_category/"+menu_id;
     show_menu_item_list(url); 
   }); 
@@ -918,6 +919,47 @@ $(function() {
         }
     });
 
+   //click menu sidebar menu category
+
+  $(".sub_click").on("click", function(){
+    var menu_id = $(this).attr("data-id");
+    var url = "get_menu_sub_category/"+menu_id;
+    sub_category = $(this).find('.sub_category_list');
+    show_sub_category_list(url,sub_category); 
+  }); 
+  //End menu category Click
+
+  //show menu item list when click menu category
+  function show_sub_category_list(url,sub_category){ 
+
+    var menu_list = $('.sub_category_list');
+    menu_list.empty();
+    //Start Ajax
+    $.ajax({      
+      type: "GET",         
+      url: url, 
+      data: {},
+      dataType: "json",
+      success: function(data) {
+        var sub_category_list = $('.sub_category_list');
+        sub_category_list.empty();
+        data = data.sub_category;
+
+        if (data.length>0) {
+          $(sub_category).removeClass('hidden');
+        for(var i in data) { 
+
+              row = '<li class="menu_category" data-id="'+data[i].id+'">'
+                       +'<a class="nav-link" data-toggle="tab" href="" role="tab">'+ data[i].name+'</a>'
+                     +'</li>' ; 
+              $(sub_category).append(row);
+          //end is_sub_item false
+        }
+        }
+      }
+    });
+    //end Ajax 
+  }
  /*  $("input").keypress(function(){
     $("span").text(i += 1);
 });*/
diff --git a/app/assets/stylesheets/addorder.scss b/app/assets/stylesheets/addorder.scss
index 03a13c06..bf09f726 100755
--- a/app/assets/stylesheets/addorder.scss
+++ b/app/assets/stylesheets/addorder.scss
@@ -69,7 +69,17 @@ section .content{
     font-weight: bold;
     border-color: #fff #fff #fff #54A5AF;
 }
-
+.sub_category_list{
+  background:#fff;
+  margin-top:8px;
+}
+.sub_category_list > li{
+  list-style:none;
+  margin-left:-40px;
+}
+.sub_category_list > li > a.nav-link{
+  border-bottom:1px solid #eee;
+}
 .custom-modal-dialog {
     left:auto;
     right: auto;
diff --git a/app/views/origami/addorders/detail.html.erb b/app/views/origami/addorders/detail.html.erb
index 9021ecb5..25c1e1cc 100755
--- a/app/views/origami/addorders/detail.html.erb
+++ b/app/views/origami/addorders/detail.html.erb
@@ -9,20 +9,15 @@
         <ul class="nav nav-tabs flex-column" role="tablist" >
             <% @menu.each do |menu|  %>
                 <%   if menu.menu_category_id.nil?%>
-                  <li class="nav-item menu_category">
+                  <li class="nav-item menu_category sub_click" data-id="<%=menu.id%>">
                     <p class="hidden menu-id"><%= menu.id  %></p> 
-                    <a class="nav-link" data-toggle="tab" href="" role="tab"> <%= menu.name%></a>
+                    <a class="nav-link" data-toggle="tab" href="" role="tab"> <%= menu.name%>
+                       <ul class=" sub_category_list hidden" id="sub_category_list">
+                      </ul>
+                    </a>
+                     
                   </li>
                   <% end%>
-                <!-- Sub-Category -->
-                <% if !menu.menu_category_id.nil? %>
-                  <ul class="collapse" id="<%= menu.menu_category_id  %>">             
-                   <li>
-                    <p class="hidden menu-id"><%= menu.id  %></p> 
-                    <a class="nav-link" data-toggle="tab" role="tab"> <%= menu.name%></a>
-                  </li>
-                  </ul>
-                <% end%>
             <%end %>
             <!-- <li class="nav-item menu_category">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>