Click here to Skip to main content
15,891,316 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
CSS
.accordion {
           width: 400px;
       }

       .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;
       }

       .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;
       }

       .accordionContent {
           background-color: #D3DEEF;
           border: 1px dashed #2F4F4F;
           border-top: none;
           padding: 5px;
           padding-top: 10px;
       }

<asp:Accordion   
    ID="Accordion1"   
    CssClass="accordion"  
    HeaderCssClass="accordionHeader"  
    HeaderSelectedCssClass="accordionHeaderSelected"  
    ContentCssClass="accordionContent"   
    runat="server">  
<panes>  
    <asp:AccordionPane ID="AccordionPane1" runat="server">  
        <Header>Employee</Header>  
        <content>  
     
         ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.              
        </content>  
      
    <asp:AccordionPane ID="AccordionPane2" runat="server">  
        <Header>Pane 2</Header>  
        <content>  
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.  
        </content>  
      
    <asp:AccordionPane ID="AccordionPane3" runat="server">  
        <Header>Pane 3</Header>  
        <content>  
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.  
        </content>  
      
</panes>  
Posted
Comments
Sandeep Mewara 22-Dec-12 12:19pm    
Your question is not too clear. You post Accordian HMTL... and what are you expecting back?
Salman Farooqui 22-Dec-12 12:21pm    
I Was trying Accordion I tried this on my aspx page but when clicking on header
Nothing is happening that is one pane should close other should open.this is not hapening what am i missing
Surendra0x2 22-Dec-12 12:22pm    
Did you attach Script manager?
Salman Farooqui 22-Dec-12 12:23pm    
I have used Script manager in master page
Surendra0x2 22-Dec-12 12:27pm    
u using accordion control on child page?

1 solution

 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900