Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples

    Volkswagen

    Volkswagen is a German automobile manufacturer headquartered in Wolfsburg, Lower Saxony, Germany. Volkswagen is the original and top-selling marquee of the Volkswagen Group, the biggest German automaker and the third largest automaker in the world.

    Mitsubishi

    The Mitsubishi Group is a group of autonomous Japanese multinational companies covering a range of businesses which share the Mitsubishi brand, trademark, and legacy.The Mitsubishi group of companies form a loose entity, the Mitsubishi Keiretsu, which is often referenced in Japanese and US media and official reports.

    Mercedes-Benz

    Mercedes-Benz is a multinational division of the German manufacturer Daimler AG, and the brand is used for luxury automobiles, buses, coaches, and trucks. Mercedes-Benz is headquartered in Stuttgart, Baden-Württemberg, Germany.The name first appeared in 1926 under Daimler-Benz but traces its origins to Daimler-Motormen-Gesell shaft's 1901 Mercedes and to Karl Benz's 1886 Benz Patent Motorwagen, which is widely regarded as the first automobile.
    <%@ Page Language="C#" Title="Accordion / Icons" AutoEventWireup="true" MasterPageFile="~/Samplebrowser.Master" CodeBehind="Icons.aspx.cs" Inherits="WebSampleBrowser.Accordion.Icons" %>
    
    
    <asp:Content ID="Content3" ContentPlaceHolderID="ControlsSection" runat="server">
         <div class="controlframe">
        <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. 
                            Volkswagen is the original and top-selling marquee of the Volkswagen Group, the biggest German automaker and the third largest automaker in the world.
                        </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, 
                            trademark, and legacy.The Mitsubishi group of companies form a loose entity, the Mitsubishi Keiretsu, which is often referenced in Japanese and US media and official reports.
                        </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.
                            Mercedes-Benz is headquartered in Stuttgart, Baden-Württemberg, Germany.The name first appeared in 1926 under Daimler-Benz but traces its origins 
                            to Daimler-Motormen-Gesell shaft's 1901 Mercedes and to Karl Benz's 1886 Benz Patent Motorwagen, which is widely regarded as the first automobile.
                        </div>
                    </ContentSection>
                </ej:AccordionItem>
            </Items>
        </ej:Accordion>
    </div>
    </asp:Content>
    
    <asp:Content ID="Content7" ContentPlaceHolderID="StyleSection" runat="server">
        <link href="<%=ResolveClientUrl("~/Content/Accordion/icons.css")%>" rel="stylesheet" />
    </asp:Content>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebSampleBrowser.Accordion
    {
        public partial class Icons : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
        }
    }
    icons.css
     
            #iconAccordion img
            {
                float: left;
                margin: -7px 1px 0 -13px;
            }
    
            .header-expand
            {
                background-image: url(../../content/images/ui-icons/ui-icons-active.png);
                background-position: -187px -60px;
                cursor: pointer;
                display: block;
                float: right !important;
                height: 16px;
                width: 16px;
            }
    
            .header-close
            {
                background-image: url(../../content/images/ui-icons/ui-icons-default.png);
                background-position: -161px -60px;
                cursor: pointer;
                display: block;
                float: right !important;
                height: 16px;
                width: 16px;
            }
    
            .e-acrdn-header:hover .header-expand
            {
                background-image: url(../../content/images/ui-icons/ui-icons-active.png);
                background-position: -187px -60px;
            }
    
            .e-acrdn-header:hover .header-close
            {
                background-image: url(../../content/images/ui-icons/ui-icons-active.png);
                background-position: -161px -60px;
            }
    
            .logos
            {
                float: left;
                height: 35px;
                margin: -6px 1px 2px -15px;
                width: 35px;
            }
    
            .e-select .logos
            {
                background-image: url(../../content/images/accordion/grey_logos.png);
            }
            .e-active .logos
            {
                background-image: url(../../content/images/accordion/white_logos.png);
            }
            .logos:hover
            {
                background-image: url(../../content/images/accordion/white_logos.png) !important;
            }
    
            .logos.volkswagan
            {
                background-position: 0 -170px;
            }
    
            .logos.mitsubishi
            {
                background-position: 0 -85px;
            }
    
            .logos.benz
            {
                background-position: 0 0;
            }