Get started with jquery-steps CDN

MIT licensed

JQuery-Steps is a plugin that enables creating multi-step forms using HTML, CSS, and JS.

Tags:
  • jQuery
  • Wizard
  • Tabs
  • Steps
  • Plugin

Stable version

Copied!

How to start using jquery-steps CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jquery-steps CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.css" referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/jquery-steps/1.1.0/jquery.steps.min.js"></script>
    <script>
        $(function() {
            $("#myForm").jquerySteps({
                headerTemplate: '<span class="number">{index+1}</span> <span class="title">{title}</span>',
                bodyTemplate: '<div><h2>{title}</h2><p>{content}</p></div>',
                onInit: function(event, currentIndex) {
                    // Do something when the wizard is initialized
                },
                onStepChanging: function(event, currentIndex, newIndex) {
                    // Do something when changing steps
                    return true; // Allow step change when condition is met
                },
                onFinishing: function(event, currentIndex) {
                    // Do something when finishing the wizard
                },
                onFinished: function(event, currentIndex) {
                    // Do something when finished the wizard
                }
            });
        });
    </script>
    <style>
        #myForm .content-pane {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="myForm">
        <ul>
            <li class="content-pane">
                <h3>Step 1</h3>
                <p>Content for Step 1</p>
            </li>
            <li class="content-pane">
                <h3>Step 2</h3>
                <p>Content for Step 2</p>
            </li>
            <li class="content-pane">
                <h3>Step 3</h3>
                <p>Content for Step 3</p>
            </li>
        </ul>
    </div>
</body>
</html>
Copied!
Copied!

All versions