Conditionally Show/Hide Elements With jQuery - Display If

Just another jQuery plugin for handling conditional logic fields that conditionally shows & hides elements based on values of other elements.

Supports any form fields such as input fields, select elements, checkboxes, radio buttons and file inputs.

How it works:

1. Check if the element passes the validation requirements to show.
2. Check all targets and determine if the object passes the display_if requirement. If there are multiple targets (meaning there are multiple) elements with the same target identifier) then the object must passes the display requirement on each target.

How to use it:

1. Download the jQuery Display If plugin and put the JavaScript file display-if.min.js after the jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="display-if.min.js"></script>

2. Create the element to conditionally show/hide using the following data attributes:

• display-if: Required
• data-target_name: Target field name
• target_class: Finds targets by CSS class
• data-target_value: The value of target field.
• data-target_value_not: The value that breaks the display requirement.
• data-target_type: Input type ('text', 'select', 'password', 'radio', 'checkbox', 'default')
• data-target_has_any_value: Ddisplays the element if the target input has any value
• data-target_matches_identifier: Checks if is matched. Great for password fields.
• data-target_value_can_be_null: Decides the value can be null.

<input type="text" name="demo" placeholder="Type anything">

<div
  class="display-if"
  data-target_name="demo"
  data-target_type="text"
  data-target_has_any_value=true>
  <small>Thanks for your input :)</small>
</div>

Changelog:

v1.0.3 (2019-08-27)

• support finding targets by class

v1.0.2 (2019-07-17)

• add ' around [name=...] finder
• support jQuery 3.4+

---

This awesome jQuery plugin is developed by jacobsteves. For more Advanced Usages, please check the demo page or visit the official website.