Click here to Skip to main content
11,796,774 members (71,857 online)
Click here to Skip to main content

AJAX Accordion coupled with jQuery Peeling effect and CSS fading

, 4 Feb 2013 CPOL 11.3K 511 12
Rate this:
Please Sign up or sign in to vote.
Shows how to take advantage of AJAX's Accordion, JQUERY & CSS to create a good looking home page.



When I first heard about AJAX and jQuery, I wasn't interested in it, well my mistake because the functions and effect that AJAX and jQuery provides are awesome.

In this article I would show you how to create a simple home page with the below effect. All these effects are already available once you Google them, I am just modifying them and putting them together as a tutorial. All credits to the original coders.

  • AJAX Accordion
  • CSS Fading on mouse hover
  • jQuery peeling effect

Required files

In order to get all the effect working you would need the below files

  • AjaxControlToolkit.dll
  • jquery-1.5.2.min.js
  • jquery.peelback.js

and the best part is, all the above files are attached in the source file of this article

Using the Code

I have made the pages based on a Masterpage just in case you would need to make more pages with the same template.

The Accordion

For the Accordion, set a reference to the AjaxControlToolkit.dll then drag a ToolkitScriptManager and an Accordion control on to your child page. And set the below values.

<asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" 
     ContentCssClass="accordionContent"  FadeTransitions="false" FramesPerSecond="40" 
     TransitionDuration="250" AutoSize="None" SelectedIndex="1" 
     RequireOpenedPane="false" SuppressHeaderPostbacks="true" Height="240px" 
     Width="500px"  >
        <asp:AccordionPane runat="server" ID="Pane1" >
            <Header>Click here</Header>  
               <div> THIS IS WHERE ALL THE CONTENTS WOULD GO INTO </div>

The above code has to go with the below CSS to get the formatting, you can change it to your use

.accordionHeader {  
    border: 0px solid #2F4F4F;  
    color: white;  
    background-color: black;  
    font-family: Verdana;  
    font-size: 12px;  
    font-weight: bold;  
    padding: 5px;  
    margin-top: 5px;  
    cursor: pointer;  
.accordionHeaderSelected {  
    border: 0px solid #2F4F4F;  
    color: white;  
    background-color: black;
    font-family: Verdana;
    font-size: 12px;  
    font-weight: bold;  
    padding: 5px;  
    margin-top: 5px;  
    cursor: pointer;  
.accordionContent {  
    background-color: black;  
    border: 0px dashed black;  
    border-top: none;  
    padding: 5px;  
    padding-top: 10px;  
   font-family: Verdana;

And you would end up with the below image.


The part that has "Click here" is where the Accordion is placed. Once you click it you get the below with a smooth sliding effect

The Fading

For the Fading effect to occur when you hover the mouse over the "My Site" section and below, add the below piece into the CSS file

   filter:alpha(opacity=70); /* For IE8 and earlier */
    filter:alpha(opacity=100); /* For IE8 and earlier */ 

The Peel Back

For the peel back effect which would appear as if you can peel off the background. All you need to do is place the code into the Body section of the MasterPage

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>

This would leave you with the below. The clickURL link is activated once you click the ‘Welcome’ shown below after the peeling 


Hope you enjoy tweaking up the looks and effects. Oh by the way there is a blue banner placed in the images folder named header-bg1.jpg for the red haters. 


  • V1.0 – 01 Feb 2013
  • Updated on 04 Feb 2013 - Image updated.


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


About the Author

Software Developer
United Arab Emirates United Arab Emirates
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 3 Pin
rajuvpatil16-Feb-15 21:59
memberrajuvpatil16-Feb-15 21:59 
GeneralMy vote of 4 Pin
VMAtm5-Feb-13 19:08
memberVMAtm5-Feb-13 19:08 
GeneralRe: My vote of 4 Pin
joe_j5-Feb-13 19:33
memberjoe_j5-Feb-13 19:33 
GeneralMy vote of 5 Pin
ahmed rageeb5-Feb-13 10:25
memberahmed rageeb5-Feb-13 10:25 
GeneralRe: My vote of 5 Pin
joe_j5-Feb-13 18:57
memberjoe_j5-Feb-13 18:57 
QuestionSuggestions Pin
joe_j4-Feb-13 18:42
memberjoe_j4-Feb-13 18:42 
Hope this would of use, and to all the experts, suggestions please.


General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151002.1 | Last Updated 4 Feb 2013
Article Copyright 2013 by joe_j
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid