How to Use Accordion Ajax Control in Asp.net

Introduction: In this article I have explain how to use Accordion Ajax control in Asp.net.

Description:

In the last article I have explained How to install Ajax control Toolkit in Visual Studio, How to useAutoCompleteExtender Ajax control in Asp.net, How to Upload multiple filesusing AjaxFileUpload and save path to database in Asp.net.

Add a webform to project. Put the below given style in between Head tag:

<style type="text/css">

    .Header

    {

        background-color:Navy;

        color:White;

        margin-top:4px;

        padding:4px;

        width:30%;

        font-size:20px;

        font-weight:bold;

    }

    .content

    {

        width:30%;

        background-color:none;

    }

   

    </style>

After that drag and drop the Accordion Ajax control from Toolbox.

<asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

        <asp:Accordion ID="Accordion1" runat="server" HeaderCssClass="Header" ContentCssClass="content">

        <Panes>

        <asp:AccordionPane ID="pane1" runat="server">

        <Header>BMW</Header>

        <Content>

        <asp:Panel runat="server" ID="panel1">

        Bayerische Motoren Werke AG commonly known as BMW, is a German automobile, motorcycle and engine manufacturing company founded in 1917. BMW is headquartered in Munich, Bavaria, Germany. It also owns and produces Mini cars, and is the parent company of Rolls-Royce Motor Cars.

       <img src="Images/bmw.jpg" height="300px" width="408px"/>

       </asp:Panel>

        </Content>

               </asp:AccordionPane>

               <asp:AccordionPane ID="pane2" runat="server">

               <Header>FORD</Header>

               <Content>

               <asp:Panel ID="panel2" runat="server">

               <img src="Images/ford.jpg" height="300px" width="408px"/>

               </asp:Panel>

               </Content>

               </asp:AccordionPane>

               <asp:AccordionPane ID="pane3" runat="server">

               <Header>MARUTI SUZUKI</Header>

               <Content>

               <asp:Panel ID="panel3" runat="server">

               <img src="Images/maruti.jpg" height="300px" width="408px" />

               </asp:Panel>

               </Content>

               </asp:AccordionPane>

                 <asp:AccordionPane ID="AccordionPane4" runat="server">

               <Header>TOYOTA</Header>

               <Content>

               <asp:Panel ID="panel4" runat="server">

               <img src="Images/Toyota.jpg" height="300px" width="408px" />

               </asp:Panel>

               </Content>

               </asp:AccordionPane>

        </Panes>

        </asp:Accordion>

Now run the project and check the result.

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.