JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="http://kflorence.github.com/jquery-wizard/src/jquery.wizard.js"></script>
<link rel="stylesheet" href="http://kflorence.github.com/jquery-wizard/external/jquery/ui/themes/smoothness/jquery-ui.smoothness.css">
<script src="http://kflorence.github.com/jquery-wizard/external/jquery/ui/jquery-ui-1.8.12.min.js"></script>
<script src="http://kflorence.github.com/jquery-wizard/external/jquery/form/jquery.form.js"></script>
<link rel="stylesheet" href="http://kflorence.github.com/jquery-wizard/examples/styles.css">
<h1><a href="../" title="jQuery.wizard">jQuery.wizard</a></h1>
<div id="wrapper">
            <div id="example-3">
                <h2>Branching Wizard</h2>

                <form name="example-3">
                    <div class="step">
                        <p>This is a branching wizard. You will see different steps depending on your answers.</p>
                    </div>

                    <div class="step" data-state="color">
                        <p>Which color do you like best?</p>
                        <label for="colorPink"><input type="radio" name="color" value="pink" id="colorPink" />Pink</label>
                        <label for="colorBlue"><input type="radio" name="color" value="blue" id="colorBlue" />Blue</label>
                    </div>

                    <div class="branch" id="pink" data-state="shapes">
                        <div class="step" >
                            <p>This is the pink branch.</p>
                            <label for="shapesdots"><input type="radio" name="shapes" value="dots" id="shapesdots" />dots</label>
                            <label for="shapesstripes"><input type="radio" name=shapes value="stripes" id="shapesstripes" />stripes</label>
                        </div>
                    </div>

                    <div class="branch" id="blue" data-state="cars">
                        <div class="step">
                            <p>This is the blue branch.</p>
                      ...

JavaScript

// Example 3: Basic branching wizard
                $("#example-3").wizard({
                    transitions: {
                        color: function( $step, action ) {
                            var branch = $step.find("[name=color]:checked").val();

                            if (!branch) {
                                alert("Please select a value to continue.");
                            }

                            return branch;
                        },
                        shapes: function( $step, action ) {
                            var branch = $step.find("[name=shapes]:checked").val();

                            if (!branch) {
                                alert("Please select a value to continue.");
                            }

                            return branch ;
                        },
                        cars: function( $step, action ) {
                            var branch = $step.find("[name=cars]:checked").val();

                            if (!branch) {
                                alert("Please select a value to continue.");
                            }

                            return branch;
                        }
                    }
                    
                });

                // Example 4: Nested Branches
                $("#example-4").wizard();