Showing posts with label Creating a Simple Accordion - ASP.NET. Show all posts
Showing posts with label Creating a Simple Accordion - ASP.NET. Show all posts

Tuesday, 22 July 2014

Creating a Simple Accordion - ASP.NET,Ajax accordion control for asp.net


How to work with Simple Accordion


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
   
     .accordionHeaderSelected {
background-color: #5078B3;
border: 1px solid #2F4F4F;
color: white;
cursor: pointer;
font-family: Arial,Sans-Serif;
font-size: 12px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
width:20%;
}
 .accordionContent {
background-color: #D3DEEF;
border-color: -moz-use-text-color#2F4F4F #2F4F4F;
border-right: 1pxdashed #2F4F4F;
border-style: nonedashed dashed;
border-width: medium1px 1px;
padding: 10px 5px 5px;
width:20%;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server">
    </ajaxToolkit:ToolkitScriptManager>

    <div>
        <ajaxToolkit:Accordion ID="Accordion1"runat="server"
            ContentCssClass="accordionContent"HeaderCssClass="accordionHeaderSelected"
            >
        <Panes>
            <ajaxToolkit:AccordionPane ID="ACCDNPANEL1"runat="server">
            <Header>Train with remains of victims
            </Header>
           <Content>
          A train carrying the remains of victims of Malaysian plane MH17 downed<br /> over rebel-held territory in eastern Ukraine arrived in Ukrainian govt-held Kharkiv.
         
          <asp:Button ID="btn1" runat="server"Text="Read more" />
           </Content>


            </ajaxToolkit:AccordionPane>

                <ajaxToolkit:AccordionPane runat="server">
                 <Header>film news</Header>
           <Content>
          
               A train carrying the remains of victims of Malaysian plane MH17 downed over <br /> rebel-held territory in eastern Ukraine arrived in Ukrainian govt-held Kharkiv.</Content>
                </ajaxToolkit:AccordionPane>

                 <ajaxToolkit:AccordionPane ID="AccordionPane1"runat="server">
                 <Header>Sports news</Header>
           <Content>
          
               A train carrying the remains of victims of Malaysian plane MH17 downed <br /> over rebel-held territory in eastern Ukraine arrived in Ukrainian govt-held Kharkiv.
          <asp:Button ID="Button1"runat="server"Text="Read more"  />
               </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>
    </div>
    </form>
</body>
</html>