Click here to Skip to main content
Click here to Skip to main content
Go to top

AJAX Accordion coupled with jQuery Peeling effect and CSS fading

, 4 Feb 2013
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.

img1

Introduction 

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" 
     HeaderCssClass="accordionHeader" 
     HeaderSelectedCssClass="accordionHeaderSelected" 
     ContentCssClass="accordionContent"  FadeTransitions="false" FramesPerSecond="40" 
     TransitionDuration="250" AutoSize="None" SelectedIndex="1" 
     RequireOpenedPane="false" SuppressHeaderPostbacks="true" Height="240px" 
     Width="500px"  >
    <Panes>
        <asp:AccordionPane runat="server" ID="Pane1" >
            <Header>Click here</Header>  
            <Content>  
               <div> THIS IS WHERE ALL THE CONTENTS WOULD GO INTO </div>
            </Content>
        </asp:AccordionPane>
    </Panes>
</asp:Accordion>

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;  
    text-align:center;
}  
  
.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;  
   text-align:left;
   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

.accordion   
{
   text-align:center;
   margin-left:26%;
   opacity:0.7;
   filter:alpha(opacity=70); /* For IE8 and earlier */
}  
 .accordion:hover
  {
      opacity:1.0;
    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>
<script type="text/javascript" src="js/jquery.peelback.js"></script>
<script type="text/javascript">
$(function () {
$('body').peelback({
adImage: 'images/peel-ad.png',
peelImage: 'images/peel-image.png',
clickURL: 'http://yoursettingspage.aspx',
smallSize: 30,
bigSize: 300,
gaTrack: false,
gaLabel: '',
autoAnimate: true,
debug: false
});
});
</script>

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

img1

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. 

History  

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

License

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

Share

About the Author

joe_j
Software Developer
United Arab Emirates United Arab Emirates
No Biography provided

Comments and Discussions

 
GeneralMy vote of 4 PinmemberVMAtm5-Feb-13 19:08 
GeneralRe: My vote of 4 Pinmemberjoe_j5-Feb-13 19:33 
GeneralMy vote of 5 Pinmemberahmed rageeb5-Feb-13 10:25 
GeneralRe: My vote of 5 Pinmemberjoe_j5-Feb-13 18:57 
QuestionSuggestions Pinmemberjoe_j4-Feb-13 18:42 

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 | Mobile
Web03 | 2.8.140916.1 | Last Updated 4 Feb 2013
Article Copyright 2013 by joe_j
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid