improve accordion. It is not done but way better than before

client/less/main.less

@@ -403,6 +403,18 @@ h4 {
   font-size: 22px;
 }
 
+.no-transition {
+  -webkit-transition: height 0.001s;
+  -moz-transition: height 0.001s;
+  -ms-transition: height 0.001s;
+  -o-transition: height 0.001s;
+  transition: height 0.001s;
+}
+
+.margin-left-10 { 
+  margin-left: 10px; 
+}
+
 .btn-responsive {
   @media (max-width: 768px) {
     font-size: 15px;

server/views/map/show.jade

@@ -3,32 +3,35 @@ block content
       .text-center
           h1 Challenge Map
           p Required challenges are marked with a *
-          p Click the  
+          .row
-              i.fa.fa-external-link 
+              .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4
-              |  button to view this map in full screen.
+                  a.btn.btn-primary.btn-block(href='/map' target='_blank') View this map in full screen
+                  // .btn.btn-primary.btn-block#showAll Expand 
       hr
-      #accordion.panel-group
+      #accordion
         for superBlock, index in superBlocks
-            h3
+            h2
+              i.fa.fa-caret-right
+              |            
               a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
                 | #{superBlock.name}
-            ul(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse")
+            div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse no-transition")
                 #nested.panel-group
                     for challengeBlock in superBlock.blocks
-                        h4
+                        h3
+                          i.fa.fa-caret-right
+                          |  
                           a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-'))
-                            | #{challengeBlock.name}
+                            | #{challengeBlock.name} (#{challengeBlock.time})
-                        div(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse")
+                        div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse no-transition")
-                            ul
-                                br                        
                             for challenge in challengeBlock.challenges
                                 if challenge.completed
-                                        p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
+                                    p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
                                         a.faded(href="/challenges/#{challenge.dashedName}" target='_parent')
                                             = challenge.title
                                             span.sr-only= " Complete"
                                 else if challenge.isRequired
-                                        p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
+                                    p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
                                         a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
                                             span= challenge.title
                                             span.sr-only= " Incomplete"
@@ -43,7 +46,7 @@ block content
                                         span.text-primary    
                                             strong *
                                 else
-                                        p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")  
+                                    p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
                                         a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
                                             span= challenge.title
                                             span.sr-only= " Incomplete"
@@ -56,3 +59,13 @@ block content
                                                 strong
                                                     em Coming Soon
         .spacer
+script.
+    $(document).ready(function(){    
+        $('#accordProfile').on('shown', function () {
+           $(".fa-caret-right").removeClass("icon-chevron-down").addClass("icon-chevron-up");
+        });
+
+        $('#accordProfile').on('hidden', function () {
+           $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
+        });
+    });