JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<ul id="choices">
    <li>Color:
        <input type="radio" name="color" value="red"/>red,
        <input type="radio" name="color" value="green"/>green,
        <input type="radio" name="color" value="blue"/>blue
    </li>
    <li>Size:
        <input type="radio" name="size" value="XS"/>XS,
        <input type="radio" name="size" value="S"/>S,
        <input type="radio" name="size" value="M"/>M,
        <input type="radio" name="size" value="L"/>L,
        <input type="radio" name="size" value="XL"/>XL
    </li> 
    <li>Textile:
        <input type="radio" name="textile" value="wool"/>wool,
        <input type="radio" name="textile" value="hemp"/>hemp,
        <input type="radio" name="textile" value="synthetic"/>synthetic
    </li> 
</ul>
<p>
    <button id="continue">Go to shopping cart…</button>
</p>

CSS

p {
 text-align:center;
}

JavaScript

$('#continue').hide();
$('#choices li')
  .each().children('input').wait('change').all()
  .$('#continue').fadeIn();