Accordions effect for blogger

By nhamngahanh | posted: 19:14 | 5 comments
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

Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for SimplexDesign check out our Write for us page for details about how YOU can share your tips with our community.

Share this post

Related Posts

Advertisement

5 comments

  1. cypherbox4 October 2009 at 23:24

    Thanks for posting this useful tutorial. I just love it.=)

    ReplyDelete
  2. mayang101@gmail.com25 October 2009 at 07:32

    cant work for me... please help me...

    ReplyDelete
  3. nhamngahanh25 October 2009 at 08:21

    @mayang101@gmail.com : a little bit of modification I made in this tutorial and I hope this effect will work for you .Check it again ,mate ,and give me your result .
    Thank for comment

    ReplyDelete
  4. A.B.8 November 2009 at 09:18

    How can i have more than 1 content in the same title. Thats what im really lookin for.

    ReplyDelete
  5. nhamngahanh8 November 2009 at 10:25

    @A.B : Here is my answer if I don't misunderstand your question : If you want to add more than one content under one title ,here is the structure :
    <h3>your title 1</h3>

    <p>
    your content 1
    your content 1a
    your content 1b
    <div>
    your content 1c
    </div>
    </p>

    <h3>your title 2</h3>

    <p>
    your content 2
    </p>

    'you content 1' here does not mean only a block of content ,you can write anything you want in this .

    ReplyDelete