Add toggle button for ongoing contests

templates/contest/list.html

@@ -14,6 +14,18 @@
         .content-description ul {
             padding: 0 !important;
         }
+
+        .btn-contest {
+            display: inline-block;
+            padding: 1px 6px;
+        }
+
+        {% if page_obj and page_obj.number > 1%}
+        #ongoing-table {
+            display: none;
+        }
+        {% endif %}
+
     </style>
 {% endblock %}
 
@@ -32,6 +44,21 @@
                     '{{ _('Joining a contest for the first time starts your timer, after which it becomes unstoppable.') }}');
             });
 
+            function makeToggleBtn(btn, divElement) {
+                btn.click(function() {
+                    divElement.toggle(300);
+
+                    if (btn.html().trim() === '{{ _('Hide')}}') {
+                        btn.html('{{ _('Show')}}');
+                    }
+                    else {
+                        btn.html('{{ _('Hide')}}');   
+                    }
+                });
+            }
+
+            makeToggleBtn($("#ongoing-btn"), $("#ongoing-table"));
+
             // var tooltip_classes = 'tooltipped tooltipped-e';
             //
             // $('.contest-tag').each(function () {
@@ -187,7 +214,17 @@
         {% endif %}
 
         {% if current_contests %}
-            <h4>{{ _('Ongoing Contests') }}</h4>
+            <h4>
+                {{ _('Ongoing Contests') }} 
+                <button class="btn-contest" id="ongoing-btn">
+                    {% if page_obj and page_obj.number > 1%}
+                    {{_('Show')}}
+                    {% else %}
+                    {{_('Hide')}}
+                    {% endif %}
+                </button>
+            </h4>
+            <div id="ongoing-table">
                 <table class="contest-list table striped">
                     <thead>
                     <tr>
@@ -222,6 +259,7 @@
                     </tbody>
                 </table>
                 <br>
+            </div>
         {% endif %}
 
         <h4>{{ _('Upcoming Contests') }}</h4>