How to use Accordion Control

 

Accordion is the control i like the most out of all the controls in the toolbox 

paste the following sample code on your web page   and see your self :  

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”AjaxControlToolkitSample._Default” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<head runat=”server”>
    <title>AjaxControlToolkitSample</title>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
    </asp:ScriptManager>
    <div>
      
        <cc1:Accordion ID=”MyAccordion” runat=”Server” HeaderCssClass=”accordionHeader” HeaderSelectedCssClass=”accordionHeaderSelected”
            ContentCssClass=”accordionContent” AutoSize=”None” FadeTransitions=”true” TransitionDuration=”250″
            FramesPerSecond=”40″ RequireOpenedPane=”false” SuppressHeaderPostbacks=”true”>
            <Panes>
                <cc1:AccordionPane runat=”server”>
                    <Header>
                     <label  style=”background-color:Gray”>Pan1</label></Header>
                    <Content>
                        <p style=”background-color:Silver”>
                            The Accordion is a web control that allows you to provide multiple panes and display
                            them one at a time. It is like having several CollapsiblePanels where only one can
                            be expanded at a time. The Accordion is implemented as a web control that contains
                            AccordionPane web controls. Each AccordionPane control has a template for its Header
                            and its Content. We keep track of the selected pane so it stays visible across postbacks.
                            It also supports three AutoSize modes so it can fit in a variety of layouts. None
                            – The Accordion grows/shrinks without restriction. This can cause other elements
                            on your page to move up and down with it. Limit – The Accordion never grows larger
                            than the value specified by its Height property. This will cause the content to
                            scroll if it is too large to be displayed. Fill – The Accordion always stays the
                            exact same size as its Height property. This will cause the content to be expanded
                            or shrunk if it isn’t the right size.
                        </p>
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane runat=”server”>
                    <Header>
                       <label  style=”background-color:Gray”>Pan2</label></Header>
                    <Content>
                        <p style=”background-color:Teal”>
                            The Accordion is written using an extender like most of the other extenders in the
                            AJAX Control Toolkit. The extender expects its input in a very specific hierarchy
                            of container elements (like divs), so the Accordion and AccordionPane web controls
                            are used to generate the expected input for the extender. The extender can also
                            be used on its own if you provide it appropriate input. The Accordion can also be
                            databound. Simply specify a data source through the DataSource or DataSourceID properties
                            and then set your data items in the HeaderTemplate and ContentTemplate properties.
                        </p>
                    </Content>
                </cc1:AccordionPane>
            </Panes>
        
        </cc1:Accordion>
    </div>
    </form>
</body>
</html>

 

 

Enjoy 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s