We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
<ej:Accordion ID="IconAccordion" runat="server">
<CustomIcon Header="header-close" SelectedHeader="header-expand" />
<Items>
<ej:AccordionItem ImageCssClass="logos volkswagan" Text="Volkswagen">
<contentsection>
<div>
Volkswagen is a German automobile manufacturer headquartered in Wolfsburg, Lower Saxony, Germany.
</div>
</contentsection>
</ej:AccordionItem>
<ej:AccordionItem ImageCssClass="logos mitsubishi" Text="Mitsubishi">
<contentsection>
<div>
The Mitsubishi Group is a group of autonomous Japanese multinational companies covering a range of businesses which share the Mitsubishi brand,
</div>
</contentsection>
</ej:AccordionItem>
<ej:AccordionItem ImageCssClass="logos benz" Text="Mercedes-Benz">
<contentsection>
<div>
Mercedes-Benz is a multinational division of the German manufacturer Daimler AG, and the brand is used for luxury automobiles, buses, coaches, and trucks.
</div>
</contentsection>
</ej:AccordionItem>
</Items>
</ej:Accordion>
</code>
Please find the style of adding icon in accordion control:
<code>
#iconAccordion img {
float: left;
margin: -7px 1px 0 -13px;
}
/*header expand command header close for the accordion item*/
/*set style for accordion header expand state style*/
.header-expand {
background-image: url(../images/ui-icons/ui-icons-active.png);
background-position: -187px -60px;
cursor: pointer;
display: block;
float: right !important;
height: 16px;
width: 16px;
}
/*set style for accordion header close state style*/
.header-close {
background-image: url(../images/ui-icons/ui-icons-default.png);
background-position: -161px -60px;
cursor: pointer;
display: block;
float: right !important;
height: 16px;
width: 16px;
}
/*while hover the accordion item header expand style like below*/
.e-acrdn-header:hover .header-expand {
background-image: url(../images/ui-icons/ui-icons-active.png);
background-position: -187px -60px;
}
/*while hover the accordion item header close style like below*/
.e-acrdn-header:hover .header-close {
background-image: url(../images/ui-icons/ui-icons-active.png);
background-position: -161px -60px;
}
/*Placed icons in the accordion div*/
/*specify the div to add the icons */
.logos {
float: left;
height: 35px;
margin: -6px 1px 2px -15px;
width: 35px;
}
/*Displays currently active accordion item icon*/
.e-active .logos {
background-image: url(../images/accordion/white_logos.png);
}
/*Displays remaining accrodion item icon*/
.e-select .logos {
background-image: url(../images/accordion/grey_logos.png);
}
/*Dislplays the image while hover the accordion item*/
.e-select:hover div {
background-image: url(../images/accordion/white_logos.png) !important;
}
/*Set background position for each accordion item icon based on the each class*/
.logos.volkswagan {
background-position: 0 -170px;
}
.logos.mitsubishi {
background-position: 0 -85px;
}
.logos.benz {
background-position: 0 0;
}
</code>
Similarly, you can add the icons for accordion items by customizing the CSS.We have prepared a sample based on this and you can refer to it as follows.
Sample: Sample
Please let us know if you have any queries.
Regards,
Kasithangam
