diff --git a/app/controllers/admin/categories_controller.rb b/app/controllers/admin/categories_controller.rb
index 4c66793..cd3e63d 100644
--- a/app/controllers/admin/categories_controller.rb
+++ b/app/controllers/admin/categories_controller.rb
@@ -10,6 +10,11 @@ class CategoriesController < AdminController
     @product_categories = environment.product_categories.find(:all, :conditions => {:parent_id => nil})
   end
 
+  def get_children
+    children = Category.find(params[:id]).children
+    render :partial => 'category_children', :locals => {:children => children}
+  end
+
   ALLOWED_TYPES = CategoriesHelper::TYPES.map {|item| item[1] }
 
   # posts back
diff --git a/app/views/categories/_category.rhtml b/app/views/categories/_category.rhtml
index 6914cd1..946e08b 100644
--- a/app/views/categories/_category.rhtml
+++ b/app/views/categories/_category.rhtml
@@ -2,12 +2,12 @@
 <div class='treeitem'>
   <%= display_color_for_category(category) %>
   <%= category.name %>
-  <div class='button' id="show_button_<%= category.id %>">
-    <%= link_to_function(_('Show'), "['category_#{category.id}','hide_button_#{category.id}'].each(Element.show); Element.hide('show_button_#{category.id}');") unless category.children.empty? %>
-  </div>
-  <div class='button' id="hide_button_<%= category.id %>" style='display:none;'>
-    <%= link_to_function(_('Hide'), "['category_#{category.id}','hide_button_#{category.id}'].each(Element.hide); Element.show('show_button_#{category.id}') ") %>
-  </div>
+  <% if category.children.count > 0 %>
+    <div class='button' id="category-loading-<%= category.id %>" style="position: relative;">
+      <a href="#" id="show-button-<%= category.id %>" class="show-button" onclick="return false;" data-category="<%= category.id %>"><%= _('Show') %></a>
+    </div>
+    <a href="#" id="hide-button-<%= category.id %>" class="hide-button" onclick="return false;" data-category="<%= category.id %>" style="display: none;"><%= _('Hide') %></a>
+  <% end %>
 
   <div>
     <%= link_to _('Add subcategory'), :action => 'new', :parent_id => category %>
@@ -16,12 +16,6 @@
   </div>
 </div>
 
-  <div id="category_<%= category.id %>" style='display:none;'>
-    <% unless category.children.empty? %>
-      <ul class='tree'>
-        <%= render :partial => 'category', :collection => category.children %>
-      </ul>
-    <% end %>
-  </div>
+<ul id="category-sub-items-<%= category.id %>" class="tree" style='display:none;'></ul>
 
 </li>
diff --git a/app/views/categories/_category_children.rhtml b/app/views/categories/_category_children.rhtml
new file mode 100644
index 0000000..06db922
--- /dev/null
+++ b/app/views/categories/_category_children.rhtml
@@ -0,0 +1,3 @@
+<% children.each do |category| %>
+  <%= render :partial => 'category', :locals => {:category => category} %>
+<% end %>
diff --git a/app/views/categories/index.rhtml b/app/views/categories/index.rhtml
index b463659..b19fc68 100644
--- a/app/views/categories/index.rhtml
+++ b/app/views/categories/index.rhtml
@@ -25,3 +25,4 @@
   <%= link_to _('New category'), :action => 'new', :type => 'Region' %>
 </div>
 
+<%= javascript_include_tag 'manage-categories' %>
diff --git a/features/manage_categories.feature b/features/manage_categories.feature
new file mode 100644
index 0000000..7b2dc90
--- /dev/null
+++ b/features/manage_categories.feature
@@ -0,0 +1,32 @@
+Feature: manage categories
+  As an environment administrator
+  I want to manage categories
+
+  Background:
+    Given the following categories
+      | name |
+      | Products |
+      | Services |
+    And the following categories
+      | name          | parent    |
+      | Beans         | products  |
+      | Potatoes      | products  |
+      | Development   | services  |
+    And I am logged in as admin
+    And I am on the environment control panel
+    And I follow "Manage categories"
+
+  Scenario: load only top level categories
+    Then I should see "Products"
+    And I should see "Services"
+    And I should not see "Beans"
+    And I should not see "Development"
+
+  @selenium
+  Scenario: load subcategories only after following parent
+    Then I should not see "Beans"
+    And I should not see "Potatoes"
+    When I follow "Show" and wait for jquery
+    Then show me the page
+
+
diff --git a/public/javascripts/manage-categories.js b/public/javascripts/manage-categories.js
new file mode 100644
index 0000000..eea054a
--- /dev/null
+++ b/public/javascripts/manage-categories.js
@@ -0,0 +1,46 @@
+(function($){
+  fetch_sub_items = function(sub_items, category){
+    loading_for_button($("#category-loading-"+category)[0]);
+    $.ajax({
+      url: "/admin/categories/get_children",
+      dataType: "html",
+      data: {id: category},
+      success: function(data, st, ajax){
+        $(sub_items).append(data);
+        $(".small-loading").remove();
+        $("#show-button-"+category).fadeOut(400, function(){
+          $("#hide-button-"+category).fadeIn();
+        });
+        $(sub_items).slideDown();
+      },
+      error: function(ajax, st, errorThrown) {
+        alert('HTTP '+st+': '+errorThrown);
+      }
+    });
+  };
+
+  $(".hide-button").live('click', function(){
+    var category = $(this).attr('data-category');
+    var sub_items = $('#category-sub-items-'+category);
+    $(this).fadeOut(400, function(){
+      $("#show-button-"+category).fadeIn();
+    });
+    $(sub_items).slideUp();
+  });
+
+  $(".show-button").live('click', function(){
+    var category = $(this).attr('data-category');
+    var sub_items = $('#category-sub-items-'+category);
+    if(!$(this).attr('data-fetched')){
+      fetch_sub_items(sub_items, category);
+      $(this).attr('data-fetched', true);
+    }
+    else{
+      $(this).fadeOut(400, function(){
+        $("#hide-button-"+category).fadeIn();
+      });
+      $(sub_items).slideDown();
+    }
+  });
+})(jQuery);
+
--
libgit2 0.21.2