diff --git a/app/assets/javascripts/crops.js.erb b/app/assets/javascripts/crops.js.erb
index 4e30a95e0e..c31666d235 100644
--- a/app/assets/javascripts/crops.js.erb
+++ b/app/assets/javascripts/crops.js.erb
@@ -48,6 +48,6 @@ function showCropMap(cropmap) {
   cropmap.addLayer(markers);
 }
 
-$('.btn.toggle').click(function () {
-  $('.toggle').toggleClass('hide');
+$('.btn.toggle.crop-hierarchy').click(function () {
+  $('.toggle.crop-hierarchy').toggleClass('hide');
 });
diff --git a/app/assets/stylesheets/overrides.css.less b/app/assets/stylesheets/overrides.css.less
index f2fe8383d9..e31ef791e8 100644
--- a/app/assets/stylesheets/overrides.css.less
+++ b/app/assets/stylesheets/overrides.css.less
@@ -320,5 +320,3 @@ html, body {
 .hide {
   display: none;
 }
-
-
diff --git a/app/views/crops/_hierarchy.html.haml b/app/views/crops/_hierarchy.html.haml
index 7bc2a67266..27d09f8662 100644
--- a/app/views/crops/_hierarchy.html.haml
+++ b/app/views/crops/_hierarchy.html.haml
@@ -1,9 +1,11 @@
 %ul
-  - @count ||= 5
+  - @count ||= 0
+  - unless defined? max
+    - max = 0 # list all without "show all" toggle button
   - display_crops.each do |c|
-    %li.crop-hierarchy{:class => @count <= 0 ? ['hide', 'toggle'] : []}
+    %li.crop-hierarchy{:class => max != 0 && @count >= max ? ['hide', 'toggle'] : []}
       = link_to c, c
-      - @count -= 1
+      - @count += 1
       - if c.varieties.present?
         - c.varieties.each do |v|
-          = render :partial => 'hierarchy', :locals => { :display_crops => [ v ] }
+          = render :partial => 'hierarchy', :locals => { :display_crops => [ v ], :max => max }
diff --git a/app/views/crops/_varieties.html.haml b/app/views/crops/_varieties.html.haml
index 07a8f4eb34..e2afb628e0 100644
--- a/app/views/crops/_varieties.html.haml
+++ b/app/views/crops/_varieties.html.haml
@@ -1,18 +1,20 @@
-- if crop.parent
-  %p
-    = crop.name
-    is a variety of
-    = succeed "." do
-      = link_to crop.parent, crop.parent
+.varieties
+  - if crop.parent
+    %p
+      = crop.name
+      is a variety of
+      = succeed "." do
+        = link_to crop.parent, crop.parent
 
-- unless crop.varieties.empty?
-  %p
-    Varieties of #{crop.name}:
+  - unless crop.varieties.empty?
+    %p
+      Varieties of #{crop.name}:
 
-  = render :partial => 'hierarchy', :locals => { :display_crops => [ crop ] }
-  - if @count < 0
-    = button_tag "Show all #{crop.varieties.size} varieties", :class => 'btn btn-link toggle'
-    = button_tag "Show less varieties", :class => 'btn btn-link toggle hide'
+    - max = 5
+    = render :partial => 'hierarchy', :locals => { :display_crops => [ crop ], :max => max }
+    - if max != 0 && @count > max
+      = button_tag "Show all #{@count-1} varieties", :class => 'btn btn-link toggle crop-hierarchy'
+      = button_tag "Show less varieties", :class => 'btn btn-link toggle crop-hierarchy hide'
 
-- if ! crop.parent and crop.varieties.empty?
-  %p None known.
+  - if ! crop.parent and crop.varieties.empty?
+    %p None known.
diff --git a/spec/features/crops/crop_detail_page_spec.rb b/spec/features/crops/crop_detail_page_spec.rb
index f1e447a0b7..1d26f08259 100644
--- a/spec/features/crops/crop_detail_page_spec.rb
+++ b/spec/features/crops/crop_detail_page_spec.rb
@@ -5,58 +5,88 @@
   let(:crop) { FactoryGirl.create(:crop) }
 
   context "varieties" do
-    let!(:roma1) { FactoryGirl.create(:crop, :name => 'Roma tomato 1', :parent => crop) }
-    let!(:roma2) { FactoryGirl.create(:crop, :name => 'Roma tomato 2', :parent => crop) }
-    let!(:roma3) { FactoryGirl.create(:crop, :name => 'Roma tomato 3', :parent => crop) }
-    let!(:roma4) { FactoryGirl.create(:crop, :name => 'Roma tomato 4', :parent => crop) }
-
-    scenario "The crop has 4 varieties" do
 
+    scenario "The crop DOES NOT have varieties" do
       visit crop_path(crop)
 
-      # It lists all 5 items (note: including the top level item.)
-      # It DOES NOT have "Show all/less" toggle link
-      expect(page).to have_css('li', text: /tomato/i, count: 5)
-      expect(page).to have_no_css('button', text: /Show all+/i)
-      expect(page).to have_no_css('button', text: /Show less+/i)
+      within ".varieties" do
+        expect(page).to have_no_selector('li', text: /tomato/i)
+        expect(page).to have_no_selector('button', text: /Show+/i)
+      end
     end
 
-    scenario "The crop has more than 4 varieties", :js => true do
-      roma5 = FactoryGirl.create(:crop, :name => 'Roma tomato 5', :parent => crop)
+    scenario "The crop has one variety" do
+      roma1 = FactoryGirl.create(:crop, :name => 'Roma tomato 1', :parent => crop)
 
       visit crop_path(crop)
 
-      # It lists the first 5 items (note: including the top level item.)
-      # It HAS have "Show all" toggle link but not "Show less" link
-      expect(page).to have_css('li', text: /tomato/i, count: 5)
-      expect(page).to have_css('li', text: 'Roma tomato 4')
-      expect(page).to have_no_css('li', text: 'Roma tomato 5')
-      expect(page).to have_css('button', text: /Show all+/i)
-      expect(page).to have_no_css('button', text: /Show less+/i)
-
-      # Clik "Show all" link
-      page.find('button', :text => /Show all+/).click
-
-      # It lists all 6 items (note: including the top level item.)
-      # It HAS have "Show all" toggle link but not "Show less" link
-      expect(page).to have_css('li', text: /tomato/i, count: 6)
-      expect(page).to have_css('li', text: 'Roma tomato 4')
-      expect(page).to have_css('li', text: 'Roma tomato 5')
-      expect(page).to have_no_selector('button', text: /Show all+/i)
-      expect(page).to have_selector('button', text: /Show less+/i)
-
-      # Clik "Show less" link
-      page.find('button', :text => /Show less+/).click
-
-      # It lists 5 items (note: including the top level item.)
-      # It HAS have "Show all" toggle link but not "Show less" link
-      expect(page).to have_css('li', text: /tomato/i, count: 5)
-      expect(page).to have_css('li', text: 'Roma tomato 4')
-      expect(page).to have_no_css('li', text: 'Roma tomato 5')
-      expect(page).to have_selector('button', text: /Show all+/i)
-      expect(page).to have_no_selector('button', text: /Show less+/i)
+      within ".varieties" do
+        # It lists all 2 items (note: including the top level item.)
+        expect(page).to have_selector('li', text: /tomato/i, count: 2)  
+        # It DOES NOT have "Show all/less" toggle link
+        expect(page).to have_no_selector('button', text: /Show+/i)
+      end
     end
 
+    context "many" do
+
+      let!(:roma1) { FactoryGirl.create(:crop, :name => 'Roma tomato 1', :parent => crop) }
+      let!(:roma2) { FactoryGirl.create(:crop, :name => 'Roma tomato 2', :parent => crop) }
+      let!(:roma3) { FactoryGirl.create(:crop, :name => 'Roma tomato 3', :parent => crop) }
+      let!(:roma4) { FactoryGirl.create(:crop, :name => 'Roma tomato 4', :parent => crop) }
+
+      scenario "The crop has 4 varieties" do
+
+        visit crop_path(crop)
+
+        within ".varieties" do
+          # It lists all 5 items (note: including the top level item.)
+          expect(page).to have_selector('li', text: /tomato/i, count: 5)
+          # It DOES NOT have "Show all/less" toggle link
+          expect(page).to have_no_selector('button', text: /Show+/i)
+        end
+      end
+
+      scenario "The crop has 5 varieties, including grandchild", :js => true do
+        roma_child1 = FactoryGirl.create(:crop, :name => 'Roma tomato child 1', :parent => roma4)
+
+        visit crop_path(crop)
+
+        within ".varieties" do
+
+          # It lists the first 5 items (note: including the top level item.)
+          # It HAS have "Show all" toggle link but not "Show less" link
+          expect(page).to have_selector('li', text: /tomato/i, count: 5)
+          expect(page).to have_selector('li', text: 'Roma tomato 4')
+          expect(page).to have_no_selector('li', text: 'Roma tomato child 1')
+          # It shows the total number (5) correctly
+          expect(page).to have_selector('button', text: /Show all 5 +/i)
+          expect(page).to have_no_selector('button', text: /Show less+/i)
+
+          # Clik "Show all" link
+          page.find('button', :text => /Show all+/).click
+
+          # It lists all 6 items (note: including the top level item.)
+          # It HAS have "Show less" toggle link but not "Show all" link
+          expect(page).to have_selector('li', text: /tomato/i, count: 6)
+          expect(page).to have_selector('li', text: 'Roma tomato 4')
+          expect(page).to have_selector('li', text: 'Roma tomato child 1')
+          expect(page).to have_no_selector('button', text: /Show all+/i)
+          expect(page).to have_selector('button', text: /Show less+/i)
+
+          # Clik "Show less" link
+          page.find('button', :text => /Show less+/).click
+
+          # It lists 5 items (note: including the top level item.)
+          # It HAS have "Show all" toggle link but not "Show less" link
+          expect(page).to have_selector('li', text: /tomato/i, count: 5)
+          expect(page).to have_selector('li', text: 'Roma tomato 4')
+          expect(page).to have_no_selector('li', text: 'Roma tomato child 1')
+          expect(page).to have_selector('button', text: /Show all 5 +/i)
+          expect(page).to have_no_selector('button', text: /Show less+/i)
+        end
+      end
+    end
   end
 
   context "signed in member" do