JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div id="container">
    <h1>Example of jQuery.dataDisplay.js...</h1>
    <h2>1. Conditionally display & style an element</h2>
    <h3>(based on an input form and conditions defined in markup)</h3>
    <b>Select "yes":</b>
    <label for="yes">
        <input type="radio" name="radioTest" value="yes" id="yes" checked> Yes</label>
    <label for="no">
        <input type="radio" name="radioTest" value="no" id="no"> No</label>
    <b>Type "testing":</b>
    <input name="inputTest" type="value"/>
    <div class="dataDisplay" 
        data-display="
            {radioTest} is equal to 'yes' && (length({inputTest}) is less than or equal to 6); ||
            {radioTest} is equal to 'yes' && ({inputTest} is equal to 'testing' || {inputTest} is equal to 'testinggg'); ||
            {inputTest} is equal to 'testing' || {inputTest}=='testinggg' :: 
                $this.css('background','black'); ||
            {inputTest} is equal to 'testing' :: 
                $this.css('color','white');
                $this.css('font-size','20px');
                $this.css('border','1px solid #fff'); ||
            {inputTest} is equal to 'testinggg' :: 
                $this.css('color','yellow');
                $this.css('border','1px solid yellow');" 
        data-display-resets="
            $this.css('color', 'black');
            $this.css('display', 'none');
            $this.css('font-size', '16px');
            $this.css('background', '#fff');
            $this.css('border', '1px solid #000');">
        <a>type 'testing' or 'testinggg' in the field above</a>
        <a>(box will hide when length > 6 when value !== testing or testinggg)</a>
    </div>
    <div class="dataDisplay" 
        data-display="
            {radioTest} == 'no';" 
        data-display-resets="
            $this.css('display', 'none');">
        <a>select the 'yes' radio field above</a>
    </div>
</div>

CSS

h2 {
    margin: 0px;
}

h3 {
    margin: 5px 25px;
    font-size: 16px;
    font-weight: strong;
    display: block;
}

b {
    padding: 20px 10px 20px;
    display: inline-block;
}

label {
    margin: 5px 20px;
    display: block;
}

a {
    display: block;
}
.dataDisplay {
    margin: 0px 10px;
    padding: 10px 10px;
    font-size: 16px;
    background: #fff;
    border: 1px solid #000;
    display: none;
}

JavaScript

/*!
 * Script: jQuery.dataDisplay.js
 * Copyright: jQuery dataDisplay plugin - Copyright (c) 2014 Graham Dixon - http://gdixon.co.uk/
 * Author: GDixon
 * Email: [email protected]
 * Licensed: MIT
 * Requires: jQuery > 1.9
 * Version: 0.0.1 (pre-release)
 */
;(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module depending on jQuery
        define(['jquery'], factory);
    } else {
        // No AMD. Register plugin with global jQuery object
        factory(jQuery);
    }
}(function ($) {

    $.fn.dataDisplay = (function (options) {
        // create a new DataDisplay instance, destroy an existing instance, or reinitiate with new options
        var dataDisplay;
        // only create when the giving el exists
        if ($(this).length) {
            if (typeof $(this).data('dataDisplay') == "undefined") {
                // create a new instance
                dataDisplay = new DataDisplay(this, options);
                // hold the instance against the calling element
                $(this).data('dataDisplay', dataDisplay);
            } else {
                // do option based functions
                if (typeof options !== 'undefined' && options == "destroy") {
                    // fully destroys the dataDisplay instance
                    dataDisplay = this.data('dataDisplay').destroy();
                } else if (typeof options !== 'undefined') {
                    // recreates the dataDisplay instance against the defined options
                    dataDisplay = this.data('dataDisplay').destroy().init(this, options);
                } else {
                    // return the dataDisplay instance held against the el
                    dataDisplay = this.data('dataDisplay');
                }
            }
        }
        // DataDisplay instance - fully intiated or destroyed
        return dataDisplay
    });

    var DataDisplay = function (el, options) {
        //...