JSFiddle - React, Tailwind, and code Playground

by lucuma

HTML

<link rel="stylesheet" href="http://www.techlaboratory.net/labs/SmartWizard2/styles/demo_style.css">
<link rel="stylesheet" href="http://www.techlaboratory.net/labs/SmartWizard2/styles/smart_wizard.css">
<script src="http://www.techlaboratory.net/labs/SmartWizard2/js/jquery.smartWizard-2.0.min.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example3/colorbox.css">
<script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<button id="doWizard">Wizard Me</button>

<div class="wrapper">
<div class="inline">

</div>
<!-- End SmartWizard Content -->          
</div>

<div class="swMain template">

              <ul>

                  <li><a href="#step-1">

                <label class="stepNumber">1</label>

                <span class="stepDesc">

                   Step 1<br />

                   <small>Step 1 description</small>

                </span>

            </a></li>

                  <li><a href="#step-2">

                <label class="stepNumber">2</label>

                <span class="stepDesc">

                   Step 2<br />

                   <small>Step 2 description</small>

                </span>

            </a></li>

                  <li><a href="#step-3">

                <label class="stepNumber">3</label>

                <span class="stepDesc">

                   Step 3<br />

                   <small>Step 3 description</small>

                </span>                   

             </a></li>

                  <li><a href="#step-4">

                <label class="stepNumber">4</label>

                <span class="stepDesc">

                   Step 4<br />

                   <small>Step 4 description</small>

                </span>                   

            </a></li>

              </ul>

              <div id="step-1">    

            <h2 class="StepTitle">Step 1 Content</h2>

            <ul type="disk">

                      <li>List 1</li>

             ...

CSS

.wrapper{display:block}
.swMain.template {display:none}

JavaScript

$(document).ready(function() {


    $('button').click(function() {






        $("button").colorbox({
            inline: true,
            open: true,
            width: "1000px",
            href: '.inline',
            onClosed: function() {
                $('.inline .swMain').remove();
            },
            onOpen: function() {
                $('.template').clone().removeClass('template').appendTo('.inline').smartWizard({
                    transitionEffect: 'slideleft',
                    onFinish: onFinishCallback
                });
            }
        });


    });


    function onFinishCallback() {

        $('#wizard').smartWizard('showMessage', 'Finish Clicked');

        //alert('Finish Clicked');
    }

});