2 files changed, 98 insertions, 1 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 5efc0d878..bbcf73055 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -1049,6 +1049,32 @@ $.extend(fixmystreet.set_up, {
         var set_map_state = true;
         fixmystreet.back_to_reports_list(e, report_list_url, map_state, set_map_state);
     });
+  },
+
+  expandable_list_items: function(){
+      $(document).on('click', '.js-toggle-expansion', function(e) {
+          e.preventDefault(); // eg: prevent button from submitting parent form
+          var $toggle = $(this);
+          var $parent = $toggle.closest('.js-expandable');
+          $parent.toggleClass('expanded');
+          $toggle.text($parent.hasClass('expanded') ? $toggle.data('less') : $toggle.data('more'));
+      });
+
+      $(document).on('click', '.js-expandable', function(e) {
+          var $parent = $(this);
+          // Ignore parents that are already expanded.
+          if ( ! $parent.hasClass('expanded') ) {
+              // Ignore clicks on action buttons (clicks on the
+              // .js-toggle-expansion button will be handled by
+              // the more specific handler above).
+              if ( ! $(e.target).is('.item-list__item--expandable__actions *') ) {
+                  e.preventDefault();
+                  $parent.addClass('expanded');
+                  var $toggle = $parent.find('.js-toggle-expansion');
+                  $toggle.text($toggle.data('less'));
+              }
+          }
+      });
   }
 
 });
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 8348dfcd7..7937139a0 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1199,7 +1199,8 @@ input.final-submit {
         background-color: rgba(255, 255, 255, 0.5);
     }
 
-    .item-list--reports__item--selected {
+    .item-list--reports__item--selected,
+    .js & .item-list--reports__item--selected.expanded:hover {
         border: 0.25em solid $primary;
         background-color: #fff;
     }
@@ -1256,6 +1257,76 @@ input.final-submit {
   }
 }
 
+.item-list__item--expandable {
+  @include clearfix();
+  border-top: 1px solid #fff;
+  background-color: transparent;
+  margin: 0;
+  padding: 1em;
+
+  .js & {
+      cursor: pointer;
+
+      &:hover, &.hovered {
+          background-color: $itemlist_item_background_hover;
+      }
+  }
+
+  h3 {
+      margin: 0;
+  }
+
+  .img {
+      float: $right;
+      width: 90px;
+      height: auto;
+      margin: flip(0 0 0.5em 1em, 0 1em 0.5em 0);
+  }
+
+  small {
+      color: #666;
+      display: block;
+      margin-top: 0.5em;
+  }
+
+  p {
+      line-height: 1.4em;
+      margin-top: 0.5em;
+  }
+
+  &.expanded {
+      .js & {
+          cursor: default;
+
+          &:hover {
+              background-color: transparent;
+          }
+      }
+  }
+}
+
+.item-list__item--expandable__actions {
+  @include flex-container();
+
+  & > * {
+      @include flex(1); // Force equal width children
+  }
+}
+
+.item-list__item--expandable__hide-until-expanded {
+  display: none;
+
+  .expanded & {
+      display: block;
+  }
+}
+
+.item-list__item--expandable__hide-when-expanded {
+  .expanded & {
+      display: none;
+  }
+}
+
 .problem-header .update-img,
 .item-list .update-img {
     float: $right;