Show.js

‹ Back

Basic example

You can show hidden elements based on form field selections. All you need to do is add a data-show attribute to the element you want to show/hide and set the value to the be ID of the form field that you want to control it with.

In this first example, we have two radio buttons. One with the ID of showjs_example_1_true and the second with the ID of showjs_example_1_false. If we want to show the hidden field when selecting the true radio, we add data-show="showjs_example_1_true" to the hidden field.

<div class="inputs">
  <div class="control-group radio_buttons optional form_basic_example form--horizontal"><div class="control-group--label"><label class="radio_buttons optional control-label">Show hidden field?</label></div><div class="controls"><label class="radio"><input class="radio_buttons optional" type="radio" value="true" name="form[basic_example]" id="form_basic_example_true" /><label class="collection_radio_buttons" for="form_basic_example_true">Yes</label></label><label class="radio"><input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="form[basic_example]" id="form_basic_example_false" /><label class="collection_radio_buttons" for="form_basic_example_false">No</label></label></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_basic_example_true"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>
<%= f.input :example, as: :radio_buttons %>
<%= f.input :hidden_field, required: false, wrapper_html: { class: "form--small", data: { show: "form_example_true" } } %>

Toggling multiple fields

Sometimes you might want to toggle a group of fields together. Rather than adding the data-show attribute to each of the element wrappers, you can wrap them all in a div with the fields in it. You will need to make sure you add the inputs class on it to retain the spacing.

<div class="inputs">
  <div class="control-group radio_buttons optional form_multiple form--horizontal"><div class="control-group--label"><label class="radio_buttons optional control-label">Show hidden field?</label></div><div class="controls"><label class="radio"><input class="radio_buttons optional" type="radio" value="true" name="form[multiple]" id="form_multiple_true" /><label class="collection_radio_buttons" for="form_multiple_true">Yes</label></label><label class="radio"><input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="form[multiple]" id="form_multiple_false" /><label class="collection_radio_buttons" for="form_multiple_false">No</label></label></div></div>
  <div class="inputs" data-show="form_multiple_true">
    <div class="control-group string optional form_hidden_field form--small"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
    <div class="control-group string optional form_hidden_field form--small"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
  </div>
</div>
<%= f.input :example, as: :radio_buttons -%>
<div class="inputs" data-show="form_example_true">
  <%= f.input :hidden_field_1 -%>
  <%= f.input :hidden_field_2 -%>
</div>

Requiring multiple matches (AND)

You can string multiple IDs together by seperating them with _&_. For example if I wanted to match against turtles_raphael and turtles_donatello I would use turtles_raphael_&_turtles_donatello.

<div class="inputs">
  <div class="control-group check_boxes optional form_multiple_and form--horizontal"><div class="control-group--label"><label class="check_boxes optional control-label">Select Donatello AND Raphael</label></div><div class="controls"><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Leonardo" name="form[multiple_and][]" id="form_multiple_and_leonardo" /><label class="collection_check_boxes" for="form_multiple_and_leonardo">Leonardo</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Donatello" name="form[multiple_and][]" id="form_multiple_and_donatello" /><label class="collection_check_boxes" for="form_multiple_and_donatello">Donatello</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Raphael" name="form[multiple_and][]" id="form_multiple_and_raphael" /><label class="collection_check_boxes" for="form_multiple_and_raphael">Raphael</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Michaelangelo" name="form[multiple_and][]" id="form_multiple_and_michaelangelo" /><label class="collection_check_boxes" for="form_multiple_and_michaelangelo">Michaelangelo</label></label><input type="hidden" name="form[multiple_and][]" value="" /></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_multiple_and_raphael_&amp;_form_multiple_and_donatello"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

Requiring multiple matches (OR)

Follow the instructions for AND matching above, but also add in data-show-type="any".

<div class="inputs">
  <div class="control-group check_boxes optional form_multiple_or form--horizontal"><div class="control-group--label"><label class="check_boxes optional control-label">Select Donatello OR Raphael</label></div><div class="controls"><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Leonardo" name="form[multiple_or][]" id="form_multiple_or_leonardo" /><label class="collection_check_boxes" for="form_multiple_or_leonardo">Leonardo</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Donatello" name="form[multiple_or][]" id="form_multiple_or_donatello" /><label class="collection_check_boxes" for="form_multiple_or_donatello">Donatello</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Raphael" name="form[multiple_or][]" id="form_multiple_or_raphael" /><label class="collection_check_boxes" for="form_multiple_or_raphael">Raphael</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Michaelangelo" name="form[multiple_or][]" id="form_multiple_or_michaelangelo" /><label class="collection_check_boxes" for="form_multiple_or_michaelangelo">Michaelangelo</label></label><input type="hidden" name="form[multiple_or][]" value="" /></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_multiple_or_raphael_&amp;_form_multiple_or_donatello" data-show-type="any"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

Select menu

While most of the use-cases for show.js will be checkboxes or radios there is support for other field types.

To show elements based on a select menu selection, you can use data-show-option and use the value of the option as the value for the attribute. Eg <option value="test"> will be data-show-option="test".

<div class="inputs">
  <div class="control-group select optional form_select"><div class="control-group--label"><label class="select optional control-label" for="form_select">Select &quot;3&quot; to show the hidden field</label></div><div class="controls"><select class="select optional form--auto" name="form[select]" id="form_select"><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="control-group string optional form_hidden_field form--small" data-show="form_select" data-show-option="3"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

Multiple selects with the same value by using the _&_ syntax to define the fields, and set the single data-show-option value on the hidden field.

<div class="inputs">
  <div class="control-group select optional form_multiselect_1"><div class="control-group--label"><label class="select optional control-label" for="form_multiselect_1">Answer Yes</label></div><div class="controls"><select class="select optional form--auto" name="form[multiselect_1]" id="form_multiselect_1"><option value="">Please select</option>
<option value="Yes">Yes</option>
<option value="No">No</option></select></div></div>
  <div class="control-group select optional form_multiselect_2"><div class="control-group--label"><label class="select optional control-label" for="form_multiselect_2">Answer Yes again</label></div><div class="controls"><select class="select optional form--auto" name="form[multiselect_2]" id="form_multiselect_2"><option value="">Please select</option>
<option value="Yes">Yes</option>
<option value="No">No</option></select></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_multiselect_1_&amp;_form_multiselect_2" data-show-option="Yes"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

Multiple selects with different values by using the _&_ syntax for the data-show-option attribute. Make sure that you're passing in the same number of data-show and data-show-option items. If there aren't enough values it will assume the value needs to be "true".

<div class="inputs">
  <div class="control-group select optional form_multiselect_3"><div class="control-group--label"><label class="select optional control-label" for="form_multiselect_3">Answer Yes</label></div><div class="controls"><select class="select optional form--auto" name="form[multiselect_3]" id="form_multiselect_3"><option value="">Please select</option>
<option value="Yes">Yes</option>
<option value="No">No</option></select></div></div>
  <div class="control-group select optional form_multiselect_4"><div class="control-group--label"><label class="select optional control-label" for="form_multiselect_4">Answer No</label></div><div class="controls"><select class="select optional form--auto" name="form[multiselect_4]" id="form_multiselect_4"><option value="">Please select</option>
<option value="Yes">Yes</option>
<option value="No">No</option></select></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_multiselect_3_&amp;_form_multiselect_4" data-show-option="Yes_&amp;_No"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

If you need multiple options from a single select menu, simply use the _&_ syntax inside the data-show-option value:

<div class="inputs">
  <div class="control-group select optional form_multiselect_value"><div class="control-group--label"><label class="select optional control-label" for="form_multiselect_value">Answer 2 or 4</label></div><div class="controls"><select class="select optional form--auto" name="form[multiselect_value]" id="form_multiselect_value"><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="control-group string optional form_hidden_field form--small" data-show="form_multiselect_value" data-show-option="2_&amp;_4"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

Text matches

You can match against text input by using data-show-input. This match will be exact, but case insensitive. What that means is that if you're looking for "Hello World" it will match for "hello world" but won't match for "hello" or "hello world!"

<div class="inputs">
  <div class="control-group string optional form_text_match form--medium"><div class="control-group--label"><label class="string optional control-label" for="form_text_match">Type &quot;Hello World&quot; (without quotes, case insensitive)</label></div><div class="controls"><input class="string optional" type="text" name="form[text_match]" id="form_text_match" /></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_text_match" data-show-input="hello world"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

You can fuzzy match text by adding the data-show-type="any" attribute.

<div class="inputs">
  <div class="control-group string optional form_text_match_fuzzy form--medium"><div class="control-group--label"><label class="string optional control-label" for="form_text_match_fuzzy">Type anything that includes the word &quot;hello&quot; (without quotes, case insensitive)</label></div><div class="controls"><input class="string optional" type="text" name="form[text_match_fuzzy]" id="form_text_match_fuzzy" /></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_text_match_fuzzy" data-show-input="hello" data-show-type="any"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

You can match any input by using the data-show-type="*" attribute.

<div class="inputs">
  <div class="control-group string optional form_text_match_any form--medium"><div class="control-group--label"><label class="string optional control-label" for="form_text_match_any">Type anything</label></div><div class="controls"><input class="string optional" type="text" name="form[text_match_any]" id="form_text_match_any" /></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_text_match_any" data-show-input="hello" data-show-type="*"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

Inverting matches

Sometimes you want to show a field by default, and hide it if something is selected. This can be done by adding data-show-inverse to your hidden element.

Note: Prior to Ornament v1.2.0 the attribute would need to be data-show-inverse="1"

<div class="inputs">
  <div class="control-group check_boxes optional form_inverse_multiple_and form--horizontal"><div class="control-group--label"><label class="check_boxes optional control-label">Select Donatello AND Raphael to hide the field</label></div><div class="controls"><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Leonardo" name="form[inverse_multiple_and][]" id="form_inverse_multiple_and_leonardo" /><label class="collection_check_boxes" for="form_inverse_multiple_and_leonardo">Leonardo</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Donatello" name="form[inverse_multiple_and][]" id="form_inverse_multiple_and_donatello" /><label class="collection_check_boxes" for="form_inverse_multiple_and_donatello">Donatello</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Raphael" name="form[inverse_multiple_and][]" id="form_inverse_multiple_and_raphael" /><label class="collection_check_boxes" for="form_inverse_multiple_and_raphael">Raphael</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Michaelangelo" name="form[inverse_multiple_and][]" id="form_inverse_multiple_and_michaelangelo" /><label class="collection_check_boxes" for="form_inverse_multiple_and_michaelangelo">Michaelangelo</label></label><input type="hidden" name="form[inverse_multiple_and][]" value="" /></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_inverse_multiple_and_raphael_&amp;_form_inverse_multiple_and_donatello" data-show-inverse=""><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>
<div class="inputs">
  <div class="control-group check_boxes optional form_inverse_multiple_or form--horizontal"><div class="control-group--label"><label class="check_boxes optional control-label">Select Donatello OR Raphael to hide the field</label></div><div class="controls"><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Leonardo" name="form[inverse_multiple_or][]" id="form_inverse_multiple_or_leonardo" /><label class="collection_check_boxes" for="form_inverse_multiple_or_leonardo">Leonardo</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Donatello" name="form[inverse_multiple_or][]" id="form_inverse_multiple_or_donatello" /><label class="collection_check_boxes" for="form_inverse_multiple_or_donatello">Donatello</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Raphael" name="form[inverse_multiple_or][]" id="form_inverse_multiple_or_raphael" /><label class="collection_check_boxes" for="form_inverse_multiple_or_raphael">Raphael</label></label><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="Michaelangelo" name="form[inverse_multiple_or][]" id="form_inverse_multiple_or_michaelangelo" /><label class="collection_check_boxes" for="form_inverse_multiple_or_michaelangelo">Michaelangelo</label></label><input type="hidden" name="form[inverse_multiple_or][]" value="" /></div></div>
  <div class="control-group string optional form_hidden_field form--small" data-show="form_inverse_multiple_or_raphael_&amp;_form_inverse_multiple_or_donatello" data-show-type="any" data-show-inverse=""><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>
<div class="inputs">
  <div class="control-group select optional form_inverse_select"><div class="control-group--label"><label class="select optional control-label" for="form_inverse_select">Select &quot;3&quot; to show the hidden field</label></div><div class="controls"><select class="select optional form--auto" name="form[inverse_select]" id="form_inverse_select"><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="control-group string optional form_hidden_field form--small" data-show="form_inverse_select" data-show-option="3" data-show-inverse=""><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
</div>

Emptying data when hiding

Sometimes you might want to prevent the data from sending to the server when the field is hidden. You can add data-show-destroy to empty out any fields that are hidden.

Try showing this field, entering in some data and then toggle the field off and back on again, you'll notice the fields are now empty.

<div class="inputs">
  <div class="control-group radio_buttons optional form_destroy form--horizontal"><div class="control-group--label"><label class="radio_buttons optional control-label">Show hidden field?</label></div><div class="controls"><label class="radio"><input class="radio_buttons optional" type="radio" value="true" name="form[destroy]" id="form_destroy_true" /><label class="collection_radio_buttons" for="form_destroy_true">Yes</label></label><label class="radio"><input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="form[destroy]" id="form_destroy_false" /><label class="collection_radio_buttons" for="form_destroy_false">No</label></label></div></div>
  <div class="inputs" data-show="form_destroy_true" data-show-destroy>
    <div class="control-group string optional form_hidden_field"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional form--small" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
    <div class="control-group select optional form_hidden_field"><div class="control-group--label"><label class="select optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><select class="select optional form--small" name="form[hidden_field]" id="form_hidden_field"><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></select></div></div>
    <div class="control-group check_boxes optional form_hidden_field form--horizontal"><div class="control-group--label"><label class="check_boxes optional control-label">Hidden field</label></div><div class="controls"><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="true" name="form[hidden_field][]" id="form_hidden_field_true" /><label class="collection_check_boxes" for="form_hidden_field_true">Yes</label></label><label class="checkbox"><input class="check_boxes optional" readonly="readonly" type="checkbox" value="false" name="form[hidden_field][]" id="form_hidden_field_false" /><label class="collection_check_boxes" for="form_hidden_field_false">No</label></label><input type="hidden" name="form[hidden_field][]" value="" /></div></div>
    <div class="control-group radio_buttons optional form_hidden_field form--horizontal"><div class="control-group--label"><label class="radio_buttons optional control-label">Hidden field</label></div><div class="controls"><label class="radio"><input class="radio_buttons optional" type="radio" value="true" name="form[hidden_field]" id="form_hidden_field_true" /><label class="collection_radio_buttons" for="form_hidden_field_true">Yes</label></label><label class="radio"><input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="form[hidden_field]" id="form_hidden_field_false" /><label class="collection_radio_buttons" for="form_hidden_field_false">No</label></label></div></div>
  </div>
</div>
<%= f.input :example, as: :radios -%>
<%= f.input :hidden_field, wrapper_html: { data: { show: "form_example_true", show_destroy: "" } } -%>

Disabling fields when hiding

Another option for not sending data to the server is to disable the fields when unchecked. This will keep the data present for the user if they change their minds, but won't submit.

<div class="inputs">
  <div class="control-group radio_buttons optional form_disabling form--horizontal"><div class="control-group--label"><label class="radio_buttons optional control-label">Show hidden field?</label></div><div class="controls"><label class="radio"><input class="radio_buttons optional" type="radio" value="true" name="form[disabling]" id="form_disabling_true" /><label class="collection_radio_buttons" for="form_disabling_true">Yes</label></label><label class="radio"><input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="form[disabling]" id="form_disabling_false" /><label class="collection_radio_buttons" for="form_disabling_false">No</label></label></div></div>
  <div class="inputs" data-show="form_disabling_true" data-show-disable>
    <div class="control-group string optional form_hidden_field"><div class="control-group--label"><label class="string optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><input class="string optional form--small" type="text" name="form[hidden_field]" id="form_hidden_field" /></div></div>
    <div class="control-group select optional form_hidden_field"><div class="control-group--label"><label class="select optional control-label" for="form_hidden_field">Hidden field</label></div><div class="controls"><select class="select optional form--small" name="form[hidden_field]" id="form_hidden_field"><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></select></div></div>
    <div class="control-group check_boxes optional form_hidden_field form--horizontal"><div class="control-group--label"><label class="check_boxes optional control-label">Hidden field</label></div><div class="controls"><label class="checkbox"><input class="check_boxes optional" type="checkbox" value="true" name="form[hidden_field][]" id="form_hidden_field_true" /><label class="collection_check_boxes" for="form_hidden_field_true">Yes</label></label><label class="checkbox"><input class="check_boxes optional" readonly="readonly" type="checkbox" value="false" name="form[hidden_field][]" id="form_hidden_field_false" /><label class="collection_check_boxes" for="form_hidden_field_false">No</label></label><input type="hidden" name="form[hidden_field][]" value="" /></div></div>
    <div class="control-group radio_buttons optional form_hidden_field form--horizontal"><div class="control-group--label"><label class="radio_buttons optional control-label">Hidden field</label></div><div class="controls"><label class="radio"><input class="radio_buttons optional" type="radio" value="true" name="form[hidden_field]" id="form_hidden_field_true" /><label class="collection_radio_buttons" for="form_hidden_field_true">Yes</label></label><label class="radio"><input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="form[hidden_field]" id="form_hidden_field_false" /><label class="collection_radio_buttons" for="form_hidden_field_false">No</label></label></div></div>
  </div>
</div>
<%= f.input :example, as: :radio_buttons -%>
<%= f.input :hidden_field, wrapper_html: { data: { show: "form_example_true", show_disable: "" } } -%>