skip to main |
skip to sidebar
RSS Feeds
Now maintained at http://www.prithviraj.com.np
Now maintained at http://www.prithviraj.com.np
Sunday, October 07, 2012
By Unknown
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Accordian with CSS >> P.Yar.B Complex</title> <%--<link href="Accordian.css" rel="stylesheet" />--%> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table width="100%" border="0"> <tr> <td colspan="2" align="center"> <h1>Accordian with CSS</h1> </td> </tr> <tr> <td colspan="3" align="center"> <asp:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" Width="490px"> <Panes> <asp:AccordionPane ID="pane1" runat="server"> <Header>Hardwares</Header> <Content> Mouse<br /> KeyBoard<br /> Monitor <br /> Printer<br /> CPU<br /> Speakers<br /> Camera </Content> </asp:AccordionPane> <asp:AccordionPane ID="pane2" runat="server"> <Header>Operating System</Header> <Content> MS Windows<br /> Linux<br /> Android<br /> Mac<br /> Unix </Content> </asp:AccordionPane> <asp:AccordionPane ID="pane3" runat="server"> <Header>.NET IDE</Header> <Content> Visual Studio<br /> Visual Web Developer<br /> SharpDevelop<br /> MonoDevelop </Content> </asp:AccordionPane> <asp:AccordionPane ID="pane4" runat="server"> <Header>John Bhatt</Header> <Content> <a href="http://www.johnbhatt.com" target="_blank">Portal Home</a><br /> <a href="http://blog.johnbhatt.com" target="_blank">Blog of P.Yar.B</a><br /> <a href="http://media.johnbhatt.com" target="_blank">Download Center</a><br /> </Content> </asp:AccordionPane> </Panes> </asp:Accordion> </td> </tr> </table> </form> </body> </html>
.accordionHeader { border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; } #master_content .accordionHeader a { color: #FFFFFF; background: none; text-decoration: none; } #master_content .accordionHeader a:hover { background: none; text-decoration: underline; } .accordionHeaderSelected { border: 1px solid #2F4F4F; color: white; background-color: #5078B3; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; } #master_content .accordionHeaderSelected a { color: #FFFFFF; background: none; text-decoration: none; } #master_content .accordionHeaderSelected a:hover { background: none; text-decoration: underline; } .accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; }Now Run the Page again. Lets See, how it looked.
Post a Comment
Feel free to write,
I will surely read your comment and revert you back as soon as possible...