jQuery Conditioner - Demo Page

This plugin allows to conditionally display elements based on an input element value. It has inline-options feature which allows to do this very easily, something similar to angular JS's ng-if feature.

Get started Fork on Github

Simple Example

Select a fruit

Please select a fruit - Hint: Banana has more options !

Banana section
Banana options go here ... 
<select id="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="mango">Mango</option>
</select>

<!-- Plugin options given inline -->
<div class="banana-section"
data-condr-input="#fruits"
data-condr-value="banana"
data-condr-action="simple?show:hide"
data-condr-events="click">
    Here are the Banana options ..
</div>

<script>
$(document).ready(function(){
    $( '.banana-section' ).conditioner();
});
</script>

Pattern matching

Select an orientation and position for the box

Select any position of horizontal to get more options on it.


Here are some options for horizontal box. 
<select class="boxOrientation">
    <option value="vl-left">Vertical - Left</option>
    <option value="vl-right">Vertical - Right</option>
    <option value="hl-top">Horizontal - Top</option>
    <option value="hl-bottom">Horizontal - Bottom</option>
</select><br/>

<!-- Here we are looking for a pattern "hl" in the input's value -->
<div class="horizontalOptions"
data-condr-value="hl"
data-condr-input=".boxOrientation"
data-condr-action="pattern?slideDown:fadeOut"
data-condr-events="change">
    Here are some options for horizontal box.
</div>

<script>
$(document).ready(function(){
    $( '.horizontalOptions' ).conditioner();
});
</script>

Selecting input elements relatively

Input elements can also be selected in relative to the element which has to be hidden.

Type "hello"
Welcome ! Here are some more options 
<table>
    <tr>
        <td>Type "hello"</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="greetings"
    data-condr-value="hello"
    data-condr-input="(prev::)(find::input[type='text'])"
    data-condr-action="simple?show:hide"
    data-condr-events="keyup change">
        <td>Welcome !</td>
        <td>Here are some more options</td>
    </tr>
</table>

<script>
$(document).ready(function(){
    $( '.greetings' ).conditioner();
});
</script>

Setting options externally

Through external options multiple values can be checked.

Ah ! Finally ... you can 
<ul>
    <li><input type="text" class="step1" placeholder="type hey" /></li>
    <li><label><input type="radio" name="step2" value="disagree" /> I Disagree</label> <label><input type="radio" value="agree" name="step2" />I Agree</label>  </li>
    <li><label><input type="checkbox" id="step3"/> I once again agree to the terms</label></li>
</ul>
<div class="multipleConditions">Ah ! Finally ... you can <button>Submit</button></div>

<script>
$('.multipleConditions').conditioner({
    conditions: [
        {
            input: '.step1',
            type: 'simple',
            value: 'hey'
        },
        {
            input: '[name=step2]',
            type: 'simple',
            value: 'agree'
        },
        {
            input: '#step3'
        },
    ],
    events: 'click keyup',
    onTrue: function(){  $(this).fadeIn( 'slow' );  },
    onFalse: function(){  $(this).slideUp( 'slow' );  }
});
</script>