anchor.diff:    <p>In this first example, we have two radio buttons. One with the ID of <code>showjs_example_1_true</code> and the second with the ID of <code>showjs_example_1_false</code>. If we want to show the hidden field when selecting the true radio, we add <code>data-show="showjs_example_1_true"</code> to the hidden field.</p>
   
     <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "showjs-example-1", ruby: capture { -%>
  -&lt;%= f.input :example, as: :radios -%&gt;
  -&lt;%= f.input :hidden_field, wrapper_html: { data: { show: "example_yes" } } -%&gt;
  -  <%- } } do -%>
  -<div class="inputs">
  -  <div class="control-group radio_buttons form--horizontal">
  -    <label class="radios required control-label">
  -      Show hidden field?
  -    </label>
  -    <div class="controls">
  -      <label class="radio">
  -        <input class="radios required" id="showjs_example_1_true" name="showjs_example_1" type="radio" value="true">
  -        Yes
  -      </label>
  -      <label class="radio">
  -        <input class="radios required" id="showjs_example_1_false" name="showjs_example_1" type="radio" value="false">
  -        No
  -      </label>
  -    </div>
  -  </div>  
  -  <div class="control-group form--small" data-show="showjs_example_1_true">
  -    <label class="optional control-label">Hidden Field</label>
  -    <div class="controls">
  -      <input class="string tel optional" type="text" />
  -    </div>
  -  </div> 
  +&lt;%= f.input :example, as: :radio_buttons %>
  +&lt;%= f.input :hidden_field, required: false, wrapper_html: { class: "form--small", data: { show: "form_example_true" } } %>
  +  <%- } } do -%>
  +<div class="inputs">
  +  <%= f.input :basic_example, as: :radio_buttons, label: "Show hidden field?", required: false, wrapper_html: { class: "form--horizontal" } %>
  +  <%= f.input :hidden_field, required: false, wrapper_html: { class: "form--small", data: { show: "form_basic_example_true" } } %>
   </div>
     <%- end -%>
   
  
positive.code: 
    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "showjs-text-fuzzy" } do -%>
  <div class="inputs">
    <div class="control-group check_boxes form--medium">
      <label class="optional control-label">Type anything that includes the word "hello" (without quotes, case insensitive)</label>
      <div class="controls">
        <input class="string tel optional" type="text" id="show-text-fuzzy" />
      </div>
    </div>
    <div class="control-group form--small" data-show="show-text-fuzzy" data-show-input="hello" data-show-type="any">
      <label class="optional control-label">Hidden Field</label>
      <div class="controls">
        <input class="string tel optional" type="text" />
      </div>
    </div> 
  </div>
    <%- end -%>
  
  
negative.code:   <p>Sometimes you might want to toggle a group of fields together. Rather than adding the <code>data-show</code> attribute to each of the element wrappers, you can wrap them all in a <code>div</code> with the fields in it. You will need to make sure you add the <code>inputs</code> class on it to retain the spacing.</p>
  
    <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "showjs-multi", ruby: capture { -%>
  &lt;%= f.input :example, as: :radio_buttons -%&gt;
  &lt;div class="inputs" data-show="form_example_true">
    &lt;%= f.input :hidden_field_1 -%&gt;
    &lt;%= f.input :hidden_field_2 -%&gt;
  &lt;/div>
    <%- } } do -%>
  <div class="inputs">
    <%= f.input :multiple, as: :radio_buttons, label: "Show hidden field?", required: false, wrapper_html: { class: "form--horizontal" } %>
    <div class="inputs" data-show="form_multiple_true">
      <%= f.input :hidden_field, required: false, wrapper_html: { class: "form--small" } %>
      <%= f.input :hidden_field, required: false, wrapper_html: { class: "form--small" } %>
    </div>
  </div>
    <%- end -%>
  