Create wizard using Accordion in React Accordion component

Accordion items can be disabled dynamically by passing the index and boolean value with the ‘enableItem’ method and also dynamically expand the item using expandItem method.

The below Wizard sample is designed for Online Shopping model. In this, each Accordion item is integrated with required components to fill the details and designed for getting user details and making payment at the end. Each field is provided with validation for all mandatory option to enable/disable to next Accordion. In below sample, accordion items can be disabled dynamically with enableItem method using created event.

Source

Preview

index.jsx

index.tsx

index.html

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
export class ReactApp extends React.Component {
    constructor() {
        super(...arguments);
        this.success = "Your payment successfully processed";
        this.email_alert = "Enter valid email address";
        this.mobile_alert = "Mobile number length should be 10";
        this.card_alert = "Card number length should be 16";
        this.cvv_alert = "CVV number length should be 3";
        this.dlgTarget = document.body;
        this.dlgButtons = [
            {
                buttonModel: { content: "Ok", isPrimary: true },
                click: () => {
                    this.alertDlg.hide();
                    if (this.accordion.expandedItems[0] === 2 &&
                        this.alertDlg.content === this.success) {
                        this.accordion.enableItem(0, true);
                        this.accordion.enableItem(1, false);
                        this.accordion.enableItem(2, false);
                        this.accordion.expandItem(true, 0);
                    }
                }
            }
        ];
    }
    dlgCreated() {
        this.hide();
    }
    acrdnCreated() {
        this.enableItem(1, false);
        this.enableItem(2, false);
    }
    btnClick(e) {
        switch (e.target.id) {
            case "Continue_Btn":
                let email = document.getElementById("email");
                let password = document.getElementById("password");
                if (email.value !== "" && password.value !== "") {
                    if (this.checkMail(email.value)) {
                        email.value = password.value = "";
                        this.accordion.enableItem(1, true);
                        this.accordion.enableItem(0, false);
                        this.accordion.expandItem(true, 1);
                    }
                    document.getElementById("err1").classList.remove("show");
                }
                else {
                    document.getElementById("err1").classList.add("show");
                }
                break;
            case "Continue_BtnAdr":
                let name = document.getElementById("name");
                let address = document.getElementById("address");
                if (name.value !== "" &&
                    address.value !== "" &&
                    this.mobile.value != null) {
                    if (this.checkMobile(this.mobile.value)) {
                        this.accordion.enableItem(2, true);
                        this.accordion.enableItem(1, false);
                        this.accordion.expandItem(true, 2);
                    }
                    document.getElementById("err2").classList.remove("show");
                }
                else {
                    document.getElementById("err2").classList.add("show");
                }
                break;
            case "Back_Btn":
                this.accordion.enableItem(1, true);
                this.accordion.enableItem(2, false);
                this.accordion.expandItem(true, 1);
                break;
            case "Save_Btn":
                let cardHolder = document.getElementById("cardHolder");
                if (this.cardNo.value != null &&
                    cardHolder.value !== "" &&
                    this.expiry.value != null &&
                    this.cvv.value != null) {
                    if (this.checkCardNo(this.cardNo.value)) {
                        if (this.checkCVV(this.cvv.value)) {
                            this.alertDlg.content = this.success;
                            this.alertDlg.show();
                        }
                    }
                    document.getElementById("err3").classList.remove("show");
                }
                else {
                    document.getElementById("err3").classList.add("show");
                }
                break;
        }
    }
    checkMail(mail) {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
            return true;
        }
        else {
            this.alertDlg.content = this.email_alert;
            this.alertDlg.show();
            return false;
        }
    }
    checkMobile(mobile) {
        if (/^\d{10}$/.test(mobile)) {
            return true;
        }
        else {
            this.alertDlg.content = this.mobile_alert;
            this.alertDlg.show();
            return false;
        }
    }
    checkCardNo(cardNo) {
        if (/^\d{16}$/.test(cardNo)) {
            return true;
        }
        else {
            this.alertDlg.content = this.card_alert;
            this.alertDlg.show();
            return false;
        }
    }
    checkCVV(cvv) {
        if (/^\d{3}$/.test(cvv)) {
            return true;
        }
        else {
            this.alertDlg.content = this.cvv_alert;
            this.alertDlg.show();
            return false;
        }
    }
    content0() {
        const alignCenter = { textAlign: 'center' };
        return (<div id="Sign_In_Form">
        <form id="formId">
          <div className="form-group">
            <div className="e-float-input">
              <input type="text" id="email" name="Email" required/>
              <span className="e-float-line"/>
              <label className="e-float-text">Email</label>
            </div>
            <div className="e-float-input">
              <input id="password" type="password" name="Password" required/>
              <span className="e-float-line"/>
              <label className="e-float-text" for="password">
                Password
              </label>
            </div>
          </div>
        </form>
        <div style={alignCenter}>
          <button className="e-btn" id="Continue_Btn" onClick={this.btnClick.bind(this)}>
            Continue
          </button>
          <div id="err1">* Please fill all fields</div>
        </div>
      </div>);
    }
    content1() {
        const alignCenter = { textAlign: 'center' };
        return (<div id="Address_Fill">
        <form id="formId_Address">
          <div className="form-group">
            <div className="e-float-input">
              <input type="text" id="name" name="Name" required/>
              <span className="e-float-line"/>
              <label className="e-float-text" for="name">
                Name
              </label>
            </div>
          </div>
          <div className="form-group">
            <div className="e-float-input">
              <input type="text" id="address" name="Address" required/>
              <span className="e-float-line"/>
              <label className="e-float-text" for="address">
                Address
              </label>
            </div>
          </div>
          <div className="form-group">
            <NumericTextBoxComponent ref={numerictextbox => {
            this.mobile = numerictextbox;
        }} format="0" placeholder="Mobile" floatLabelType="Auto" showSpinButton={false}/>
          </div>
        </form>
        <div style={alignCenter}>
          <button className="e-btn" id="Continue_BtnAdr" onClick={this.btnClick.bind(this)}>
            Continue
          </button>
          <div id="err2">* Please fill all fields</div>
        </div>
      </div>);
    }
    content2() {
        const alignCenter = { textAlign: 'center' };
        return (<div id="Card_Fill">
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <div className="form-group">
            <NumericTextBoxComponent ref={numerictextbox => {
            this.cardNo = numerictextbox;
        }} format="0" placeholder="Card No" floatLabelType="Auto" showSpinButton={false}/>
          </div>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <div className="form-group">
            <div className="e-float-input">
              <input type="text" id="cardHolder" name="cardHolder" required/>
              <span className="e-float-line"/>
              <label className="e-float-text" for="cardHolder">
                CardHolder Name
              </label>
            </div>
          </div>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <DatePickerComponent ref={calendar => (this.expiry = calendar)} width="100%" format="MM/yyyy" placeholder="Expiry Date" floatLabelType="Auto"/>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <div className="form-group">
            <NumericTextBoxComponent ref={numerictextbox => {
            this.cvv = numerictextbox;
        }} format="0" placeholder="CVV" floatLabelType="Auto" showSpinButton={false}/>
          </div>
        </div>
        <div style={alignCenter}>
          <button className="e-btn" id="Back_Btn" onClick={this.btnClick.bind(this)}>
            Back
          </button>
          <button className="e-btn" id="Save_Btn" onClick={this.btnClick.bind(this)}>
            Save
          </button>
          <div id="err3">* Please fill all fields</div>
        </div>
      </div>);
    }
    render() {
        return (<div>
        <div className="template_title"> Online Shopping Payment Module</div>

        <DialogComponent ref={dialog => (this.alertDlg = dialog)} header="Alert" width={200} isModal={true} content="" target={this.dlgTarget} buttons={this.dlgButtons} created={this.dlgCreated}/>

        <AccordionComponent ref={accordion => (this.accordion = accordion)} created={this.acrdnCreated}>
          <AccordionItemsDirective>
            <AccordionItemDirective expanded={true} header="Sign In" content={this.content0.bind(this)}/>
            <AccordionItemDirective header="Delivery Address" content={this.content1.bind(this)}/>
            <AccordionItemDirective header="Card Details" content={this.content2.bind(this)}/>
          </AccordionItemsDirective>
        </AccordionComponent>
      </div>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));

import * as React from "react";
import * as ReactDOM from "react-dom";

import { enableRipple } from '@syncfusion/ej2-base';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';

export class ReactApp extends React.Component<{}, {}> {
  public success: string = "Your payment successfully processed";
  public email_alert: string = "Enter valid email address";
  public mobile_alert: string = "Mobile number length should be 10";
  public card_alert: string = "Card number length should be 16";
  public cvv_alert: string = "CVV number length should be 3";
  public dlgTarget: HTMLElement = document.body;

  public dlgButtons: Object[] = [
    {
      buttonModel: { content: "Ok", isPrimary: true },
      click: () => {
        this.alertDlg.hide();
        if (
          this.accordion.expandedItems[0] === 2 &&
          this.alertDlg.content === this.success
        ) {
          this.accordion.enableItem(0, true);
          this.accordion.enableItem(1, false);
          this.accordion.enableItem(2, false);
          this.accordion.expandItem(true, 0);
        }
      }
    }
  ];

  public dlgCreated(): void {
    this.hide();
  }

  public acrdnCreated(): void {
    this.enableItem(1, false);
    this.enableItem(2, false);
  }

  public btnClick(e): void {
    switch (e.target.id) {
      case "Continue_Btn":
        let email: string = document.getElementById("email");
        let password: string = document.getElementById("password");
        if (email.value !== "" && password.value !== "") {
          if (this.checkMail(email.value)) {
            email.value = password.value = "";
            this.accordion.enableItem(1, true);
            this.accordion.enableItem(0, false);
            this.accordion.expandItem(true, 1);
          }
          document.getElementById("err1").classList.remove("show");
        } else {
          document.getElementById("err1").classList.add("show");
        }
        break;
      case "Continue_BtnAdr":
        let name: string = document.getElementById("name");
        let address: string = document.getElementById("address");
        if (
          name.value !== "" &&
          address.value !== "" &&
          this.mobile.value != null
        ) {
          if (this.checkMobile(this.mobile.value)) {
            this.accordion.enableItem(2, true);
            this.accordion.enableItem(1, false);
            this.accordion.expandItem(true, 2);
          }
          document.getElementById("err2").classList.remove("show");
        } else {
          document.getElementById("err2").classList.add("show");
        }
        break;
      case "Back_Btn":
        this.accordion.enableItem(1, true);
        this.accordion.enableItem(2, false);
        this.accordion.expandItem(true, 1);
        break;
      case "Save_Btn":
        let cardHolder: string = document.getElementById("cardHolder");
        if (
          this.cardNo.value != null &&
          cardHolder.value !== "" &&
          this.expiry.value != null &&
          this.cvv.value != null
        ) {
          if (this.checkCardNo(this.cardNo.value)) {
            if (this.checkCVV(this.cvv.value)) {
              this.alertDlg.content = this.success;
              this.alertDlg.show();
            }
          }
          document.getElementById("err3").classList.remove("show");
        } else {
          document.getElementById("err3").classList.add("show");
        }
        break;
    }
  }

  public checkMail(mail: string): void {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
      return true;
    } else {
      this.alertDlg.content = this.email_alert;
      this.alertDlg.show();
      return false;
    }
  }

  public checkMobile(mobile: number): void {
    if (/^\d{10}$/.test(mobile)) {
      return true;
    } else {
      this.alertDlg.content = this.mobile_alert;
      this.alertDlg.show();
      return false;
    }
  }

  public checkCardNo(cardNo: number): void {
    if (/^\d{16}$/.test(cardNo)) {
      return true;
    } else {
      this.alertDlg.content = this.card_alert;
      this.alertDlg.show();
      return false;
    }
  }

  public checkCVV(cvv: number): void {
    if (/^\d{3}$/.test(cvv)) {
      return true;
    } else {
      this.alertDlg.content = this.cvv_alert;
      this.alertDlg.show();
      return false;
    }
  }
  public content0() {
    const alignCenter = { textAlign: 'center' };
    return (
      <div id="Sign_In_Form">
        <form id="formId">
          <div className="form-group">
            <div className="e-float-input">
              <input type="text" id="email" name="Email" required />
              <span className="e-float-line" />
              <label className="e-float-text">Email</label>
            </div>
            <div className="e-float-input">
              <input id="password" type="password" name="Password" required />
              <span className="e-float-line" />
              <label className="e-float-text" for="password">
                Password
              </label>
            </div>
          </div>
        </form>
        <div style={alignCenter}>
          <button
            className="e-btn"
            id="Continue_Btn"
            onClick={this.btnClick.bind(this)}
          >
            Continue
          </button>
          <div id="err1">* Please fill all fields</div>
        </div>
      </div>
    );
  }
  public content1() {
    const alignCenter = { textAlign: 'center' };
    return (
      <div id="Address_Fill">
        <form id="formId_Address">
          <div className="form-group">
            <div className="e-float-input">
              <input type="text" id="name" name="Name" required />
              <span className="e-float-line" />
              <label className="e-float-text" for="name">
                Name
              </label>
            </div>
          </div>
          <div className="form-group">
            <div className="e-float-input">
              <input type="text" id="address" name="Address" required />
              <span className="e-float-line" />
              <label className="e-float-text" for="address">
                Address
              </label>
            </div>
          </div>
          <div className="form-group">
            <NumericTextBoxComponent
              ref={numerictextbox => {
                this.mobile = numerictextbox;
              }}
              format="0"
              placeholder="Mobile"
              floatLabelType="Auto"
              showSpinButton={false}
            />
          </div>
        </form>
        <div style={alignCenter}>
          <button
            className="e-btn"
            id="Continue_BtnAdr"
            onClick={this.btnClick.bind(this)}
          >
            Continue
          </button>
          <div id="err2">* Please fill all fields</div>
        </div>
      </div>
    );
  }
  public content2() {
    const alignCenter = { textAlign: 'center' };
    return (
      <div id="Card_Fill">
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <div className="form-group">
            <NumericTextBoxComponent
              ref={numerictextbox => {
                this.cardNo = numerictextbox;
              }}
              format="0"
              placeholder="Card No"
              floatLabelType="Auto"
              showSpinButton={false}
            />
          </div>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <div className="form-group">
            <div className="e-float-input">
              <input type="text" id="cardHolder" name="cardHolder" required />
              <span className="e-float-line" />
              <label className="e-float-text" for="cardHolder">
                CardHolder Name
              </label>
            </div>
          </div>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <DatePickerComponent
            ref={calendar => (this.expiry = calendar)}
            width="100%"
            format="MM/yyyy"
            placeholder="Expiry Date"
            floatLabelType="Auto"
          />
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
          <div className="form-group">
            <NumericTextBoxComponent
              ref={numerictextbox => {
                this.cvv = numerictextbox;
              }}
              format="0"
              placeholder="CVV"
              floatLabelType="Auto"
              showSpinButton={false}
            />
          </div>
        </div>
        <div style={alignCenter}>
          <button
            className="e-btn"
            id="Back_Btn"
            onClick={this.btnClick.bind(this)}
          >
            Back
          </button>
          <button
            className="e-btn"
            id="Save_Btn"
            onClick={this.btnClick.bind(this)}
          >
            Save
          </button>
          <div id="err3">* Please fill all fields</div>
        </div>
      </div>
    );
  }
  render() {
    return (
      <div>
        <div className="template_title"> Online Shopping Payment Module</div>

        <DialogComponent
          ref={dialog => (this.alertDlg = dialog)}
          header="Alert"
          width={200}
          isModal={true}
          content=""
          target={this.dlgTarget}
          buttons={this.dlgButtons}
          created={this.dlgCreated}
        />

        <AccordionComponent
          ref={accordion => (this.accordion = accordion)}
          created={this.acrdnCreated}
        >
          <AccordionItemsDirective>
            <AccordionItemDirective
              expanded={true}
              header="Sign In"
              content={this.content0.bind(this)}
            />
            <AccordionItemDirective
              header="Delivery Address"
              content={this.content1.bind(this)}
            />
            <AccordionItemDirective
              header="Card Details"
              content={this.content2.bind(this)}
            />
          </AccordionItemsDirective>
        </AccordionComponent>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Accordion Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body id="container">
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!