Hide "Advanced Settings" by default

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -214,7 +214,13 @@
 .xblock--drag-and-drop--editor .items-form .row {
     margin-bottom: 20px;
 }
-
+.xblock--drag-and-drop--editor .items-form .row.advanced {
+    display: none;
+}
+.xblock--drag-and-drop--editor .items-form .row.advanced-link {
+    padding-left: 1em;
+    font-size: 80%;
+}
 
 /** Buttons **/
 .xblock--drag-and-drop--editor .btn {

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -169,7 +169,8 @@ function DragAndDropEditBlock(runtime, element, params) {
                         .on('click', '.add-item', function(e) {
                             _fn.build.form.item.add();
                         })
-                        .on('click', '.remove-item', _fn.build.form.item.remove);
+                        .on('click', '.remove-item', _fn.build.form.item.remove)
+                        .on('click', '.advanced-link a', _fn.build.form.item.showAdvancedSettings);
                 },
                 form: {
                     zone: {
@@ -398,7 +399,13 @@ function DragAndDropEditBlock(runtime, element, params) {
                             if (_fn.build.form.item.count === 1) {
                                 _fn.build.$el.items.form.find('.remove-item').addClass('hidden');
                             }
-                        }
+                        },
+                        showAdvancedSettings: function(e) {
+                            e.preventDefault();
+                            var $el = $(e.currentTarget).closest('.item');
+                            $el.find('.row.advanced').show();
+                            $el.find('.row.advanced-link').hide();
+                        },
                     },
                     submit: function() {
                         var items = [],

drag_and_drop_v2/templates/html/js_templates.html

@@ -92,7 +92,10 @@
             <textarea id="item-{{id}}-error-feedback"
                       class="error-feedback">{{ feedback.incorrect }}</textarea>
         </div>
-        <div class="row">
+        <div class="row advanced-link">
+            <a href="#">{{i18n "Show advanced settings" }}</a>
+        </div>
+        <div class="row advanced">
             <label for="item-{{id}}-width-percent">{{i18n "Preferred width as a percentage of the background image width (or blank for automatic width):"}}</label>
             <input type="number" id="item-{{id}}-width-percent" class="item-width" value="{{ singleDecimalFloat widthPercent }}" step="0.1" min="1" max="99" />%
             <!--
@@ -102,7 +105,7 @@
             <input type="hidden" class="item-pixel-width" value="{{ pixelWidth }}" />
             <input type="hidden" class="item-pixel-height" value="{{ pixelHeight }}" />
         </div>
-        <div class="row">
+        <div class="row advanced">
           <label for="item-{{id}}-numerical-value">
             {{i18n "Optional numerical value (if you set this, students will be prompted for this value after dropping this item)"}}
           </label>
@@ -111,7 +114,7 @@
                  id="item-{{id}}-numerical-value"
                  class="item-numerical-value" value="{{ numericalValue }}" />
         </div>
-        <div class="row">
+        <div class="row advanced">
           <label for="item-{{id}}-numerical-margin">
             {{i18n "Margin +/- (when a numerical value is required, values entered by students must not differ from the expected value by more than this margin; default is zero)"}}
           </label>