anchor.diff:  
     <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "showjs-text" } do -%>
   <div class="inputs">
  -  <div class="control-group check_boxes form--medium">
  -    <label class="optional control-label">Type "Hello World" (without quotes, case insensitive)</label>
  -    <div class="controls">
  -      <input class="string tel optional" type="text" id="show-text-exact" />
  -    </div>
  -  </div>
  -  <div class="control-group form--small" data-show="show-text-exact" data-show-input="hello world">
  -    <label class="optional control-label">Hidden Field</label>
  -    <div class="controls">
  -      <input class="string tel optional" type="text" />
  -    </div>
  -  </div> 
  +  <%= f.input :text_match, label: "Type \"Hello World\" (without quotes, case insensitive)", required: false, wrapper_html: { class: "form--medium" } %>
  +  <%= f.input :hidden_field, required: false, wrapper_html: { class: "form--small", data: { show: "form_text_match", show_input: "hello world" } } %>
   </div>
     <%- end -%>
   
  
positive.code: 
    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "showjs-inverse-1" } do -%>
  <div class="inputs">
    <div class="control-group radio_buttons form--horizontal">
      <label class="radios required control-label">
        Select Donatello AND Raphael to hide the field
      </label>
      <div class="controls">
        <label class="checkbox">
          <input class="check_boxes required" id="showjs_leonardo3" name="showjs_leonardo3" type="checkbox" value="true">
          Leonardo
        </label>
        <label class="checkbox">
          <input class="check_boxes required" id="showjs_donatello3" name="showjs_donatello3" type="checkbox" value="true">
          Donatello
        </label>
        <label class="checkbox">
          <input class="check_boxes required" id="showjs_raphael3" name="showjs_raphael3" type="checkbox" value="true">
          Raphael
        </label>
        <label class="checkbox">
          <input class="check_boxes required" id="showjs_michaelangelo3" name="showjs_michaelangelo3" type="checkbox" value="true">
          Michaelangelo
        </label>
      </div>
    </div>  
    <div class="inputs" data-show="showjs_raphael3_&_showjs_donatello3" data-show-inverse>
      <div class="control-group form--small">
        <label class="optional control-label">Hide This Field</label>
        <div class="controls">
          <input class="string tel optional" type="text" />
        </div>
      </div> 
    </div>
  </div>
    <%- end -%>
  
    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "showjs-inverse-2" } do -%>
  <div class="inputs">
    <div class="control-group radio_buttons form--horizontal">
      <label class="radios required control-label">
        Select Donatello OR Raphael to hide the field
      </label>
      <div class="controls">
        <label class="checkbox">
          <input class="check_boxes required" id="showjs_leonardo4" name="showjs_leonardo4" type="checkbox" value="true">
          Leonardo
        </label>
        <label class="checkbox">
          <input class="check_boxes required" id="showjs_donatello4" name="showjs_donatello4" type="checkbox" value="true">
          Donatello
        </label>
        <label class="checkbox">
          <input class="check_boxes required" id="showjs_raphael4" name="showjs_raphael4" type="checkbox" value="true">
          Raphael
        </label>
        <label class="checkbox">
          <input class="check_boxes required" id="showjs_michaelangelo4" name="showjs_michaelangelo4" type="checkbox" value="true">
          Michaelangelo
        </label>
      </div>
    </div>  
    <div class="inputs" data-show="showjs_raphael4_&_showjs_donatello4" data-show-type="any" data-show-inverse>
      <div class="control-group form--small">
        <label class="optional control-label">Hide This Field</label>
        <div class="controls">
          <input class="string tel optional" type="text" />
        </div>
      </div> 
    </div>
  </div>
    <%- end -%>
  
    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "showjs-inverse-3" } do -%>
  <div class="inputs">
    <div class="control-group check_boxes form--horizontal ">
      <label class="check_boxes required control-label">
        Select "3" to hide the field
      </label>
      <div class="controls form--small">
        <select class="select" id="show-js-select-inverted">
          <option value="">Please select</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>
    </div>
    <div class="inputs" data-show="show-js-select-inverted" data-show-option="3" data-show-inverse>
      <div class="control-group form--small">
        <label class="optional control-label">Hide This Field</label>
        <div class="controls">
          <input class="string tel optional" type="text" />
        </div>
      </div> 
    </div>
  </div>
    <%- end -%>
  
  
negative.code: 
    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "showjs-select-3" } do -%>
  <div class="inputs">
    <%= f.input :multiselect_3, as: :select, collection: ["Yes", "No"], label: "Answer Yes", required: false, prompt: "Please select", input_html: { class: "form--auto" } %>
    <%= f.input :multiselect_4, as: :select, collection: ["Yes", "No"], label: "Answer No", required: false, prompt: "Please select", input_html: { class: "form--auto" } %>
    <%= f.input :hidden_field, required: false, wrapper_html: { class: "form--small", data: { show: "form_multiselect_3_&_form_multiselect_4", show_option: "Yes_&_No" } } %>
  </div>
    <%- end -%>
  
  