How to add custom icons to the Accordion header?
This knowledge base explains you about how to configure more icons in the Accordion header.
Step by steps
Refer to the following steps to achieve this.
Step 1: Initialize the Accordion component with created & expanding event as shown in the following code snippet.
var acrdnObj = new ej.navigations.Accordion({ items: [ … ], expanding: function (args) { … }, created: function (args) { … }); } }); acrdnObj.appendTo('#Accordion_default');
|
Step 2: Bind the created event to render “n” number of icons in the Accordion header as shown in the following code snippet.
created: function (args) {
var icon1 = document.createElement('span');
icon1.setAttribute('class', 'e-copy e-icons');
document.querySelector('.e-add').parentElement.appendChild(icon1);
var icon2 = document.createElement('span');
icon2.setAttribute('class', 'e-close e-icons');
document.querySelector('.e-add').parentElement.appendChild(icon2);
document.querySelector('.e-icons').parentElement.addEventListener("click", function (args) {
alert((args.target as any).classList[0].toString() + " icon Clicked");
flag = true;
});
}
Step 3: Bind the expanding event to prevent the expanding or collapsing functionalities on icon click as shown in the following code snippet.
expanding: function (args) {
if (flag) {
args.cancel = true;
flag = false;
}
},
Step 4: Kindly apply your required CSS properties for rendering the required icons as shown in the following code snippet.
<style>
body {
touch-action: none;
}
.e-image1 {
background-image: url(https://ej2.syncfusion.com/demos/src/schedule/images/airways-1.svg);
height: 30px;
padding-left: 35px;
background-repeat: no-repeat;
}
.e-image2 {
background-image: url(https://ej2.syncfusion.com/demos/src/schedule/images/airways-2.svg);
height: 30px;
padding-left: 35px;
background-repeat: no-repeat;
}
.e-image3 {
background-image: url(https://ej2.syncfusion.com/demos/src/schedule/images/airways-3.svg);
height: 30px;
padding-left: 35px;
background-repeat: no-repeat;
}
.e-acrdn-header-icon {
display: table;
font-size: 20px;
height: 36px;
min-height: 36px;
min-width: 24px;
position: absolute;
right: 28px;
top: 0;
}
.e-copy:before {
content: '\e70a';
}
.e-close:before {
content: '\e7fc';
}
.e-add:before {
content: '\e7f9';
}
.e-add,
.e-close,
.e-copy {
padding-left: 10px;
font-size: 15px;
}
</style>
Step 5: Run the sample. Now, you can view the rendered icons in the Accordion header and the same can be viewed in the following output image.
Figure 1: Output Image of the Accordion
Refer to the example from the following GitHub link.
Example –https://github.com/SyncfusionExamples/javascript-accordion-header-buttons
