Use the generic Show/Hide more items available in Quicksilver

Change-Id: Ib2ca8ed8b751c41d92a6b5f4b8d982d67b4d9fc1
Signed-off-by: Eric Poirier <eric.poirier@eclipse-foundation.org>
diff --git a/content/en_index.php b/content/en_index.php
index 19ea47f..3da3139 100644
--- a/content/en_index.php
+++ b/content/en_index.php
@@ -170,7 +170,7 @@
       <?php endforeach;?>
     </div>
     <hr>
-    <div class="featured-more-videos">
+    <div id="featured-more-items" aria-expanded="false" class="collapse">
       <div class="row">
         <?php foreach ($videos_more_row as $video): ?>
           <?php print $video; ?>
@@ -178,7 +178,7 @@
       </div>
       <hr>
     </div>
-    <a class="btn btn-photon-secondary view-more-videos">View More Videos <i class="fa fa-arrow-down"></i></a>
+    <a data-toggle-text="Close" role="button" data-toggle="collapse" href="#featured-more-items" aria-expanded="true" aria-controls="featured-more-items" class="btn btn-photon-secondary toggle-text">View More Videos <i class="fa fa-arrow-down"></i></a>
   </div>
 </div>
 
diff --git a/public/css/photon.css b/public/css/photon.css
index 437d400..5eb023e 100644
--- a/public/css/photon.css
+++ b/public/css/photon.css
@@ -142,9 +142,20 @@
   height: 50px;
 }
 
-.featured-more-videos {
+.featured-more-items {
   display: none;
 }
+
+.featured-circle-stats {
+  width: 70px;
+  height: 70px;
+  border-radius: 70px;
+  padding-top: 18px;
+}
+.featured-circle-stats .feather {
+  width: 30px;
+  height: 30px;
+}
 .featured-videos {
   background-color: #cda034;
   padding: 20px 0 40px;
diff --git a/public/js/photon.js b/public/js/photon.js
index c61f19f..a62bb57 100644
--- a/public/js/photon.js
+++ b/public/js/photon.js
@@ -21,16 +21,4 @@
   $('.featured-new-noteworthy-read-more .feather-x').click(function() {
     $(this).parent().fadeOut(100);
   });
-
-  $('.view-more-videos').click(function() {
-    if ($(this).hasClass('close-more-videos')) {
-      $('.featured-more-videos').slideUp(300);
-      var icon = $("<i></i>").attr("class","fa fa-arrow-down");
-      $(this).removeClass('close-more-videos').text('More Videos ').append(icon);
-    }
-    else {
-      $('.featured-more-videos').slideDown(300);
-      $(this).addClass('close-more-videos').text('Close');
-    }
-  });
 });