Create wizard using Accordion
19 Dec 202224 minutes to read
Accordion items can be disabled dynamically by passing the index and boolean value with the enableItem method.
The below demo is designed for simple payment module that enable or disable Accordion based on sequential validation of each Accordion content.
@using Syncfusion.EJ2.Navigations
@using Syncfusion.EJ2.Inputs
<div class="accordion-control-section">
<div class="accordion-control-section">
<div class='template_title'> Online Shopping Payment Module</div>
@(Html.EJS().Accordion("element")
.Expanding("expand")
.Created("created")
.ContentTemplate(
@<div class="e-accordion-container">
<div>
<div>
Sign In
</div>
<div>
<div id="Sign_In_Form" style="padding: 10px">
<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>
</div>
<div>
<div>
Delivery Address
</div>
<div>
<div id="Address_Fill" style="padding: 10px">
<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">
@Html.EJS().NumericTextBox("mobile").Placeholder("Mobile").FloatLabelType(FloatLabelType.Auto).Format("0").ShowSpinButton(false).Render()
</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>
</div>
<div>
<div>
Card Details
</div>
<div>
<div id="Card_Fill" style="padding: 10px">
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<div class="form-group">
@Html.EJS().NumericTextBox("cardNo").Placeholder("Card No").FloatLabelType(FloatLabelType.Auto).Format("0").ShowSpinButton(false).Render()
</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">
@Html.EJS().DatePicker("expiry").Readonly(false).Format("MM/yyyy").Placeholder("Expiry Date").Width("100%").Render()
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<div class="form-group">
@Html.EJS().NumericTextBox("CVV").Placeholder("CVV").FloatLabelType(FloatLabelType.Auto).Format("0").ShowSpinButton(false).Render()
</div>
</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>
</div>
).Render()
)
</div>
<div>
@Html.EJS().Dialog("alertDialog").Header("Alert").Target("#element").ShowCloseIcon(true).Width("250").IsModal(true).Created("dlgCreated").Content("").Visible(false).Render()
</div>
</div>
<style>
.accordion-control-section {
margin: 0 10% 0 10%;
}
@@media screen and (max-width: 768px) {
.accordion-control-section {
margin: 0;
}
}
#err1, #err2, #err3 {
display: none;
color: red;
margin-top: 10px;
font-weight: 500;
}
#err1.show,
#err2.show,
#err3.show {
display: block;
}
.e-dialog {
max-height: 300px !important;
}
.template_title {
text-align: center;
padding: 10px 0;
margin: 20px 0;
text-overflow: ellipsis;
font-weight: bold;
font-size: 16px;
}
</style>
<script>
var success = 'Your payment successfully processed';
var email_alert = 'Enter valid email address';
var mobile_alert = 'Mobile number length should be 10';
var card_alert = 'Card number length should be 16';
var cvv_alert = 'CVV number length should be 3';
var alertDlg;
var acrdnObj;
function dlgCreated() {
alertDlg = document.getElementById("alertDialog").ej2_instances[0];
alertDlg.buttons = [{
buttonModel: { content: "Ok", isPrimary: true },
click: function () {
alertDlg.hide();
if (acrdnObj.expandedIndices[0] === 2 && alertDlg.content === success) {
acrdnObj.enableItem(0, true);
acrdnObj.enableItem(1, false);
acrdnObj.enableItem(2, false);
acrdnObj.expandItem(true, 0);
}
}
}];
alertDlg.dataBind();
alertDlg.hide();
}
function checkMail(mail) {
if (/^\w+([\.-]?\w+)*@@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
return (true);
} else {
alertDlg.content = email_alert;
alertDlg.show();
return (false);
}
}
function checkMobile(mobile) {
if (mobile.match(/^\d{10}$/)) {
return (true);
} else {
alertDlg.content = mobile_alert;
alertDlg.show();
return (false);
}
}
function checkCardNo(cardNo) {
if (cardNo.match(/^\d{16}$/)) {
return (true);
} else {
alertDlg.content = card_alert;
alertDlg.show();
return (false);
}
}
function checkCVV(cvv) {
if (cvv.match(/^\d{3}$/)) {
return (true);
} else {
alertDlg.content = cvv_alert;
alertDlg.show();
return (false);
}
}
function created(e) {
acrdnObj = document.getElementById("element").ej2_instances[0];
acrdnObj.enableItem(1, false);
acrdnObj.enableItem(2, false);
}
function expand(e) {
if (e.name === 'expanding' && (e.index === 0)) {
document.getElementById('Continue_Btn').onclick = (e) => {
var email = document.getElementById('email');
var password = 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' && (e.index === 1)) {
document.getElementById('Continue_BtnAdr').onclick = (e) => {
var name = document.getElementById('name');
var address = document.getElementById('address');
var mobile = 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' && (e.index === 2)) {
document.getElementById('Back_Btn').onclick = (e) => {
acrdnObj.enableItem(1, true);
acrdnObj.enableItem(2, false);
acrdnObj.expandItem(true, 1);
};
document.getElementById('Save_Btn').onclick = (e) => {
var cardHolder = document.getElementById('cardHolder');
var expiry = document.getElementById('expiry');
var cardNo = document.getElementById('cardNo');
var cvv = document.getElementById('CVV');
if ((cardNo.value !== '') && (cardHolder.value !== '') && (expiry.value !== '') && (cvv.value !== '')) {
if (checkCardNo(cardNo.value)) {
if (checkCVV(cvv.value)) {
alertDlg.content = success;
alertDlg.show();
}
}
document.getElementById('err3').classList.remove('show');
} else {
document.getElementById('err3').classList.add('show');
}
};
}
}
</script>public ActionResult Index()
{
return View();
}NOTE