How to Use Accordion Ajax Control in Asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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:
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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon