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 .
Thanks for posting this useful tutorial. I just love it.=)
ReplyDeletecant work for me... please help me...
ReplyDelete@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 .
ReplyDeleteThank for comment
How can i have more than 1 content in the same title. Thats what im really lookin for.
ReplyDeletethank u for your sharing
ReplyDeletei'm just wondering. what will happen if the js upload site is down or the js isn't working? how will it look?
ReplyDeleteone more thing : if the js file can't not found ,all the elements will be show up and we got a mess in monitor ^^ lol
ReplyDelete@list2day.blogpsot.com : You can save my live demo to your computer and see the sourcecode . Inserting script code before or after /head tag doesn't matter . Both of them are correct ,my friend . I suggest you copy the code from my live demo and modify as you want . That's easier
ReplyDeleteok thanks. i will try it again. This is a really wonderful widget.
ReplyDeleteHello again. Sorry for the bother.
ReplyDeleteCan you please take a look at http://lists2day.blogspot.com and see why there is a dark gray line at the footer? i can see that your footer also has that.
Is there a way that I can delete it? I don't feel comfortable with that line.
Thanks a lot!
Hi,
ReplyDeleteThank you very much for the great accordion effect.
please, I tried to add more than one content under one title but as described above BUT it doesn't work, only the first content appeared and the second doesn't appear. when I added 'div' on the second content, the second content displayed even the title is not selected.
Thanks.
I can not how to fill out "your content 3", please give me a complete example, or his sintax
ReplyDeletehello, this is great and also still working, but coaul you please help me how to input an image in to this?
ReplyDeleteI want to make sliding image gallery...
and also how to close that first panel at first?
Thank you so much for this tutorial! I would also love to know how to keep the first menu shut when the page loads.
ReplyDeleteThis won't work if there is picture or embedded forum
ReplyDelete