diff -r e550b10fe3ca -r e87a340711a4 cms/app-client/app/controllers/application.js
--- a/cms/app-client/app/controllers/application.js	Fri Feb 19 21:18:12 2016 +0100
+++ b/cms/app-client/app/controllers/application.js	Mon Feb 22 18:06:39 2016 +0100
@@ -12,10 +12,10 @@
   currentId: null,
   currentItem: Ember.computed('currentId', function() {
     Ember.$(".result-item").toggleClass("playing", false);
-    Ember.$("#"+this.get('currentId')).toggleClass("playing", true);
     if (this.get('currentId') === null){
       return null;
     }
+    Ember.$("#"+this.get('currentId').replace( /(:|\.|\[|\]|,)/g, "\\$1" )).toggleClass("playing", true);
     return this.store.findRecord('document', this.get('currentId'));
   }),
   modalItem: Ember.computed('detail', function() {
@@ -83,11 +83,12 @@
       this.set("currentId", item.id);
     },
     showMore: function(item){
-      if (Ember.$("#"+item.id).hasClass("show-more")){
-          Ember.$("#"+item.id).toggleClass("show-more", false);
+      var domItem = Ember.$("#"+item.id.replace( /(:|\.|\[|\]|,)/g, "\\$1" ));
+      if (domItem.hasClass("show-more")){
+          domItem.toggleClass("show-more", false);
       } else{
         Ember.$(".result-item").toggleClass("show-more", false);
-        Ember.$("#"+item.id).toggleClass("show-more", true);
+        domItem.toggleClass("show-more", true);
       }
     },
     toggleModal: function(item){