Blog

Accordion Example in ajax

Posted by Rajshree Mittal Blogs | AJAX May 08, 2010
Accordion is just like multiview control but it doesnt take post back as multiview .
Accordion is new ajax control used for seeing multiview .You can make 'n' no of views and on clicking the particular heading the respected discription will be shown and the other activated description get hided

We can apply css also.we can give effects for fade in ,fade out, the time period etc........


How To use:


Source Code:


<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <asp:Accordion ID="acc1" runat="server" SelectedIndex="0" FadeTransitions="true"   TransitionDuration="250"
    FramesPerSecond="40"
    RequireOpenedPane="false">
    <Panes>
    <asp:AccordionPane ID="p1" runat="server">
    <Header>Accordion</Header>
    <Content>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.
    </Content>
    </asp:AccordionPane>
    <asp:AccordionPane ID="p2" runat="server">
    <Header>AutoSize</Header>
    <Content>

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.
</Content>
    </asp:AccordionPane>
    </Panes>
   </asp:Accordion>
   
    </form>
</body>
COMMENT USING
PREMIUM SPONSORS
Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.
Employers - Post Free Jobs
SPONSORED BY
  • MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.
Employers - Post Free Jobs