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 herehere 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 templateCreate 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 .
No comments:
Post a Comment