VIEW ALL GALLERY LIGHTS

Saturday, October 3, 2009

Accordions effect for blogger

we've seen accordion effect in many web 2.0 sites . To see what accordion effect is ,you can take a look on the sidebar of my blog ,in template I designed section ,you will see accordion effect . When you click on bars in this section ,it will go down and reveal content .
Do you want to add this effect to your blog on blogger ?

You can check demo here

here is instruction to install accordion to your blogger:
login to your blogger account , go to edit HTML ,and check expand widget content .
Insert this code after </head>
<script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

Save template
Create a HTML/javascript widget and paste this code into the widget content :
<div class='accordion'>

<h3>your title 1</h3>

<p>
your content 1
</p>

<h3>your title 2</h3>

<p>
your content 2
</p>

<h3>your title 3</h3>

<p>
your content 3
</p>

</div>

ok,We are done .
note : remember to change your title1,your title 2,your title 3 and your content 1,2,3 to your owns.

P/s: there are some errors with this code which cause this effect can't work properly . Thank to mayang101@gmail.com comment ,I correct the code and also add a live demo . You can view demo file source for more .
mayang101@gmail.com ,thank you again and hope you come back .

huy signature

No comments:

Post a Comment