Howon
diff --git a/‎css/stylesheet.css‎
Lines changed: 6 additions & 2 deletions b/‎css/stylesheet.css‎
Lines changed: 6 additions & 2 deletions
diff --git a/‎js/dom/add_categories.js‎
Lines changed: 11 additions & 7 deletions b/‎js/dom/add_categories.js‎
Lines changed: 11 additions & 7 deletions
diff --git a/‎public/algorithm_visualizer.css‎
Lines changed: 6 additions & 2 deletions b/‎public/algorithm_visualizer.css‎
Lines changed: 6 additions & 2 deletions
diff --git a/‎public/algorithm_visualizer.js‎
Lines changed: 11 additions & 8 deletions b/‎public/algorithm_visualizer.js‎
Lines changed: 11 additions & 8 deletions
diff --git a/‎public/algorithm_visualizer.js.map‎
Lines changed: 1 addition & 1 deletion b/‎public/algorithm_visualizer.js.map‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎public/algorithm_visualizer.min.css‎
Lines changed: 1 addition & 1 deletion b/‎public/algorithm_visualizer.min.css‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎public/algorithm_visualizer.min.js‎
Lines changed: 3 additions & 3 deletions b/‎public/algorithm_visualizer.min.js‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎public/algorithm_visualizer.min.js.map‎
Lines changed: 1 addition & 1 deletion b/‎public/algorithm_visualizer.min.js.map‎
Lines changed: 1 addition & 1 deletion
@@ -156,7 +156,11 @@ button.indent {
     padding-left: 28px;
 }
 
-button.collapse {
+.algorithms {
+  box-shadow: inset 0 2px 2px rgba(0,0,0,0.36),inset 0 -2px 2px rgba(0,0,0,0.24);
+}
+
+.algorithms.collapse {
     display: none;
 }
 
@@ -577,4 +581,4 @@ button[disabled] {
 @-o-keyframes line_highlight {
     from { background: rgba(255, 0, 0, .1); }
     to   { background: rgba(255, 0, 0, .3); }
-}
+}
@@ -8,8 +8,8 @@ const {
   each
 } = $;
 
-const addAlgorithmToCategoryDOM = (category, subList, algorithm) => {
-  const $algorithm = $('<button class="indent collapse">')
+const getAlgorithmDOM = (category, subList, algorithm) => {
+  return $('<button class="indent collapse">')
     .append(subList[algorithm])
     .attr('data-algorithm', algorithm)
     .attr('data-category', category)
@@ -35,17 +35,21 @@ const addCategoryToDOM = (category) => {
     .attr('data-category', category);
 
   $category.click(function () {
-    $(`.indent[data-category="${category}"]`).toggleClass('collapse');
-    $(this).find('i.fa').toggleClass('fa-caret-right fa-caret-down');
+    const $self = $(this);
+    $self.toggleClass('open');
+    $self.next().toggleClass('collapse');
+    $self.find('i.fa').toggleClass('fa-caret-right fa-caret-down');
   });
 
-  $('#list').append($category);
+  const $algorithms = $('<div class="algorithms collapse">');
+  $('#list').append($category).append($algorithms);
 
   each(categorySubList, (algorithm) => {
-    addAlgorithmToCategoryDOM(category, categorySubList, algorithm);
+    const $algorithm = getAlgorithmDOM(category, categorySubList, algorithm);
+    $algorithms.append($algorithm);
   });
 };
 
 module.exports = () => {
   each(app.getCategories(), addCategoryToDOM);
-};
+};
@@ -273,7 +273,11 @@ button.indent {
     padding-left: 28px;
 }
 
-button.collapse {
+.algorithms {
+  box-shadow: inset 0 2px 2px rgba(0,0,0,0.36),inset 0 -2px 2px rgba(0,0,0,0.24);
+}
+
+.algorithms.collapse {
     display: none;
 }
 
@@ -691,4 +695,4 @@ button[disabled] {
 
 /* Internet Explorer */
 
-/* Opera < 12.1 */
+/* Opera < 12.1 */
Original file line number	Diff line number	Diff line change
`@@ -273,7 +273,11 @@ button.indent {`
`273`	`273`	`padding-left: 28px;`
`274`	`274`	`}`
`275`	`275`
`276`		`-button.collapse {`
	`276`	`+.algorithms {`
	`277`	`+ box-shadow: inset 0 2px 2px rgba(0,0,0,0.36),inset 0 -2px 2px rgba(0,0,0,0.24);`
	`278`	`+}`
	`279`	`+`
	`280`	`+.algorithms.collapse {`
`277`	`281`	`display: none;`
`278`	`282`	`}`
`279`	`283`
`@@ -691,4 +695,4 @@ button[disabled] {`
`691`	`695`
`692`	`696`	`/* Internet Explorer */`
`693`	`697`
`694`		`-/* Opera < 12.1 */`
	`698`	`+/* Opera < 12.1 */`