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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Icons in accordion

Thread ID:

Created:

Updated:

Platform:

Replies:

120297 Sep 18,2015 11:15 AM UTC Sep 22,2015 06:21 AM UTC ASP.NET Web Forms 4
loading
Tags: Accordion
Manolo
Asked On September 18, 2015 11:15 AM UTC

Hi,

I want set my custom icons on accordion items.

In your example web http://asp.syncfusion.com/demos/web/accordion/icons.aspx

I don't understand how you load your icons.

Can you explain?

Thanks

Kasithangam C [Syncfusion]
Replied On September 21, 2015 12:39 PM UTC

Hi Manolo,

Thanks for contacting Syncfusion support.

We have showcased the demo link, icons added in accordion control by using the property “CustomIcon” and customization of its style.This “CustomIcon” has two properties,Header and SelectHeader CSS class names.Please find the API link.

http://help.syncfusion.com/js/api/ejaccordion#members:customicon

We have customized the style of custom icon in the icon.css file of our online demo link.We have added the sprite image for the corresponding div element and customized the CSS by setting background position of the CSS class. Please find the code to define the CustomIcon property.


<code>

<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


Manolo
Replied On September 21, 2015 04:49 PM UTC

Thank you!

Manolo
Replied On September 21, 2015 05:04 PM UTC

Thank you!

Kasithangam C [Syncfusion]
Replied On September 22, 2015 06:21 AM UTC

Hi Manolo,

Thanks for your update. Please get back to us if you have further queries. We will be happy to help you out.

Regards,
Kasithangam

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;