A lame and ugly way of expanding and collapsing categories in the filter topic…

A lame and ugly way of expanding and collapsing categories in the filter topic dropdown on the forum.

lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee

@@ -5,6 +5,7 @@ if Backbone?
       "click .browse": "toggleTopicDrop"
       "keydown .post-search-field": "performSearch"
       "click .sort-bar a": "sortThreads"
+      "click .toggle-category": "toggleCategory"
       "click .browse-topic-drop-menu": "filterTopic"
       "click .browse-topic-drop-search-input": "ignoreClick"
       "click .post-list .list-item a": "threadSelected"
@@ -372,3 +373,12 @@ if Backbone?
       scrollTarget = Math.min(scrollTop - itemFromTop, scrollTop)
       scrollTarget = Math.max(scrollTop - itemFromTop - $(".browse-topic-drop-menu").height() + $(items[index]).height(), scrollTarget)
       $(".browse-topic-drop-menu").scrollTop(scrollTarget)
+
+
+    toggleCategory: (event)=>
+      event.stopImmediatePropagation()
+      event.preventDefault()
+      console.log event.target
+      $elem  = $(event.target)
+      $children = $($elem.closest('li').children('ul')[0])
+      $children.slideToggle(600)
\ No newline at end of file

lms/static/sass/_discussion.scss

@@ -883,6 +883,12 @@ body.discussion {
           color: #fff;
         }
 
+        .toggle-category {
+          margin: 7px 0;
+          float: left;
+          font-size: 20px;
+        }
+
         .unread {
           float: right;
           padding: 0 5px;
@@ -1054,7 +1060,7 @@ body.discussion {
 
     a {
       display: block;
-      position: relative;      
+      position: relative;
       float: left;
       clear: both;
       width: 100%;

lms/templates/discussion/_filter_dropdown.html

@@ -15,8 +15,8 @@
 </%def>
 
 <%def name="render_category(categories, category)">
-    <li>
-        <a href="#"><span class="board-name">${category}</span></a>
+    <li class="dropdown-category">
+        <a href="#"><span class="toggle-category">+</span><span class="board-name">${category}</span></a>
         <ul>
             ${render_dropdown(categories[category])}
         </ul>