Create wizard using accordion in EJ2 TypeScript Accordion control

2 May 202320 minutes to read

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.

import { Dialog } from '@syncfusion/ej2-popups';
import { enableRipple } from '@syncfusion/ej2-base';
import { DatePicker } from '@syncfusion/ej2-calendars';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { Accordion, ExpandEventArgs } from '@syncfusion/ej2-navigations';

enableRipple(true);

let success: string = 'Your payment successfully processed';
let email_alert: string = 'Enter valid email address';
let mobile_alert: string = 'Mobile number length should be 10';
let card_alert: string = 'Card number length should be 16';
let cvv_alert: string = 'CVV number length should be 3';

let datePicker: DatePicker = new DatePicker({
  width: '100%',
  format: 'MM/yyyy',
  floatLabelType: 'Auto',
  placeholder: 'Expiry Date'
});
datePicker.appendTo("#expiry");

let cardNum: NumericTextBox = new NumericTextBox({
  placeholder: 'Card No',
  floatLabelType: 'Auto',
  format: '0',
  showSpinButton: false
});
cardNum.appendTo('#cardNo');

let cvv: NumericTextBox = new NumericTextBox({
  placeholder: 'CVV',
  floatLabelType: 'Auto',
  format: '0',
  showSpinButton: false
});
cvv.appendTo('#CVV');

let mobile: NumericTextBox = new NumericTextBox({
  placeholder: 'Mobile',
  floatLabelType: 'Auto',
  format: '0',
  showSpinButton: false
});
mobile.appendTo('#mobile');

let alertDialog: Dialog = new Dialog({
  header: 'Alert',
  width: 200,
  isModal: true,
  content: '',
  target: document.body,
  buttons: [{
    buttonModel: { content: 'Ok', isPrimary: true },
    click: (() => {
      alertDialog.hide();
      if (acrdnObj.expandedIndices[0] === 2 && alertDialog.content === success) {
        acrdnObj.enableItem(0, true);
        acrdnObj.enableItem(1, false);
        acrdnObj.enableItem(2, false);
        acrdnObj.expandItem(true, 0);
      }
    })
  }]
});
alertDialog.appendTo('#alertDialog');
alertDialog.hide();

let acrdnObj: Accordion = new Accordion({
  expanding: expand,
  created: () => {
   acrdnObj.enableItem(1, false);
   acrdnObj.enableItem(2, false);
  },
  items: [
    { header: 'Sign In', content: '#Sign_In_Form', expanded: true },
    { header: 'Delivery Address', content: '#Address_Fill' },
    { header: 'Card Details', content: '#Card_Fill' },
  ]
});
acrdnObj.appendTo('#element');

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

function checkMobile(mobile: number): void {
  if (mobile.match(/^\d{10}$/)) {
    return (true);
  } else {
    alertDialog.content = mobile_alert;
    alertDialog.show();
    return (false)
  }
}

function checkCardNo(cardNo: number): void {
  if (cardNo.match(/^\d{16}$/)) {
    return (true);
  } else {
    alertDialog.content = card_alert;
    alertDialog.show();
    return (false)
  }
}

function checkCVV(cvv: number): void {
  if (cvv.match(/^\d{3}$/)) {
    return (true);
  } else {
    alertDialog.content = cvv_alert;
    alertDialog.show();
    return (false)
  }
}

function expand(e: ExpandEventArgs): void {
  if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 0) {
    document.getElementById('Continue_Btn').onclick = (e : Event) => {
      let email: string = document.getElementById('email');
      let password: string = document.getElementById('password');
      if(email.value !== '' && password.value !== '') {
        if(checkMail(email.value)) {
          email.value = password.value = '';
          acrdnObj.enableItem(1, true);
          acrdnObj.enableItem(0, false);
          acrdnObj.expandItem(true, 1);
        }
        document.getElementById('err1').classList.remove('show');
      } else {
        document.getElementById('err1').classList.add('show');
      }
    }
  } else if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 1) {
    document.getElementById('Continue_BtnAdr').onclick = (e : Event) => {
      let name: string = document.getElementById('name');
      let address: string = document.getElementById('address');
      let mobile: number = document.getElementById('mobile');
      if((name.value !== '') && (address.value !== '') && (mobile.value !== '')) {
        if(checkMobile(mobile.value)) {
          acrdnObj.enableItem(2, true);
          acrdnObj.enableItem(1, false);
          acrdnObj.expandItem(true, 2);
        }
        document.getElementById('err2').classList.remove('show');
      } else {
        document.getElementById('err2').classList.add('show');
      }
    }
  } else if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 2) {
    document.getElementById('Back_Btn').onclick = (e : Event) => {
      acrdnObj.enableItem(1, true);
      acrdnObj.enableItem(2, false);
      acrdnObj.expandItem(true, 1);
    }
    document.getElementById('Save_Btn').onclick = (e : Event) => {
      let cardHolder: string =document.getElementById('cardHolder');
      let expiry: number = document.getElementById('expiry');
      let cardNo: number = document.getElementById('cardNo');
      let cvv: number = document.getElementById('CVV');
      if((cardNo.value !== '') && (cardHolder.value !== '') && (expiry.value !== '') && (cvv.value !== '')) {
        if (checkCardNo(cardNo.value)) {
          if (checkCVV(cvv.value)) {
            alertDialog.content = success;
            alertDialog.show();
          }
        }
        document.getElementById('err3').classList.remove('show');
      } else {
        document.getElementById('err3').classList.add('show');
      }
    }
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='template_title'> Online Shopping Payment Module</div>
        <div id='element'></div>
        <div id='result'></div>
    </div>
    <div id="Sign_In_Form" style="display: none; padding: 3px 0">
        <form id="formId">
            <div class="form-group">
                <div class="e-float-input">
                    <input type="text" id="email" name="Email" required="" />
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="email">Email</label>
                </div>
                <div class="e-float-input">
                    <input class="e-input" id="password" type="password" name="Password" required="" />
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="password">Password</label>
                </div>
            </div>
        </form>
        <div style="text-align: center">
            <button class='e-btn' id="Continue_Btn">Continue</button>
            <div id="err1">* Please fill all fields</div>
        </div>
    </div>
    <div id="Address_Fill" style="display: none; padding: 3px 0">
        <form id="formId_Address">
            <div class="form-group">
                <div class="e-float-input">
                    <input type="text" id="name" name="Name" required="" />
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="name">Name</label>
                </div>
            </div>
            <div class="form-group">
                <div class="e-float-input">
                    <input type="text" id="address" name="Address" required="" />
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="address">Address</label>
                </div>
            </div>
            <div class="form-group">
              <input type="text" id="mobile" />
            </div>
        </form>
        <div style="text-align: center">
            <button class='e-btn' id="Continue_BtnAdr">Continue</button>
            <div id="err2">* Please fill all fields</div>
        </div>
    </div>
    <div id="Card_Fill" style="display: none; padding: 3px 0;">
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <div class="form-group">
                <input type="text" id="cardNo" />
            </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <div class="form-group">
                <div class="e-float-input">
                    <input type="text" id="cardHolder" name="cardHolder" required="" />
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="cardHolder">CardHolder Name</label>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <input id="expiry" />
        </div>
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <div class="form-group">
              <input type="text" id="CVV" />
            </div>
        </div>
        <div style="text-align: center">
            <button class='e-btn' id="Back_Btn">Back</button>
            <button class='e-btn' id="Save_Btn">Save</button>
            <div id="err3">* Please fill all fields</div>
        </div>
    </div>
    <div id="alertDialog"></div>
</body>
</html>