jquery - Conditioner

by Aakash Chakravarthy

HTML

<script src="https://cdn.rawgit.com/vaakash/jquery-conditioner/master/jquery.conditioner.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css">
<table class="table">
<tr>
    <td>Select a color:</td>
    <td>
        <select id="bgColor">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="custom">I'll enter my own color</option>
        </select>
    </td>
</tr>

<tr data-conditioner data-condr-input="#bgColor" data-condr-value="custom" data-condr-action="simple?fadeIn:hide" data-condr-events="click">
    <td>Enter your custom color:</td>
    <td><input type="text" /></td>
</tr>

<tr>
    <td>Select text length:</td>
    <td>
        <input type="radio" name="textLength" value="full" /> Full text<br/>
        <input type="radio" name="textLength" value="summary"/> Summary
    </td>
</tr>

<tr data-conditioner data-condr-input="[name=textLength]" data-condr-value="summary" data-condr-action="simple?fadeIn:hide" data-condr-events="click">
    <td>Summary size:</td>
    <td><input type="number" value="200"/> words</td>
</tr>

</table>

CSS

.table{
    width: 80%;
    margin: 50px;
    border: 1px solid #dfdfdf;
}
[data-conditioner]{
    background: #f7f7f7;
}

JavaScript

$( '[data-conditioner]' ).conditioner();