Link new metadata behaviour and layout in css and javascript

2 files changed, 6 insertions, 18 deletions

diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index 67bfc02..4b1d4a9 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -119,24 +119,8 @@ $(document).ready(function () {
 
 meta_data = {
   initialize : function() {
-    $("#metadata").hide();
-
-    $("#button").click(function () {
-      
-      $("#metadata").slideToggle(1200);
-      image_interface.initialize();
-
-      if ($("#button").attr("class") == "unselected") {
-        $("#button").attr("class", "selected");        
-        
-      }
-      else {
-        $("#button").attr("class", "unselected");
-        $("#image_browser").hide();
-        $("#image_browser_toggle").attr("class", "unselected");
-      }
-      
-      return false;
+    document.getElementById("metadata_details").addEventListener("toggle", function() {
+      if (this.open) image_interface.initialize();
     });
   }
 };
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 94248a6..0c0779f 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -93,6 +93,10 @@ input[type=radio] {
   margin-left: 5px;
 }
 
+#metadata_details summary {
+  margin-bottom: 1em;
+}
+
 .right { text-align: right; }
 .clear_left { clear: left; }