ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu

Simple Accordion Effect Using Jquery: How to

Simple Accordion Effect Using Jquery: How to

There are quite a lot of tutorials on the web about the accordion effect. But, none appears to be clear. Being a webmaster & web designer myself, I find it difficult to understand the tutorials out there. So, I thought I should explain this stuff in the most simplest way possible and that’s what we have got in this article too. To those who do not know what an accordion effect  is, just take a look at the screen shot below.

accordion effect 386x550 So, let’s get started with the tutorial. I’ll split the tutorial into three parts : HTML, JavaScript and CSS.

HTML

The HTML required to achieve this effect is shown below. Just copy the code below and paste the same anywhere on your template/theme. For users on blogspot, you may paste the codes anywhere in between your <body> and </body> tags – preferably using the “Edit Template” mode than pasting it using the “Page Elements” page. The same applies to WP users as well – preferably adding the codes using the widget option (I’m not a WP geek. However, Harsh will help you out if you need some assistance).

<div class="accordion">
    <h3>SAMPLE HEADING</h3>
      <p>CONTENT HERE</p>
    <h3>SAMPLE HEADING</h3>
      <p>CONTENT HERE</p>
    <h3>SAMPLE HEADING</h3>
      <p>CONTENT HERE</p>
    <h3>SAMPLE HEADING</h3>
      <p>CONTENT HERE</p>
    <h3>SAMPLE HEADING</h3>
      <p>CONTENT HERE</p>
</div>

Replace “SAMPLE HEADING” with the title you wish to have on the widget. Similarly, replace “CONTENT HERE” with any content of your choice – only text. If you plan to use scripts or images, then you need to define the same in the CSS part. I’ll restrict myself to a text only version in this tutorial – I want to keep it simple here:)

JavaScript – Jquery

Blogspot users may add the following script just above </head> on their template. You may neglect the first line if you already possess a Jquery file (preferably the latest one) on your blog.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<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>

WordPress users may refer the following link to know about adding custom javascript on their template – Using JavaScript On WordPress.

CSS

WordPress Users may add the following codes to your custom.css file and upload the same to your host server while users on blogspot shall add the following codes before ]]></b:skin> on your blogger template.

.accordion {
	width: 480px;
	border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
	background: #e9e7e7 url(http://www.shoutmeloud.com/wp-content/uploads/2011/08/arrow.gif) no-repeat right -51px;
	padding: 7px 15px;
	margin: 0;
	font: bold 120%/100% Georgia,"Nimbus Roman No9 L",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;
        text-align:justify;
        font-family:Georgia,"Nimbus Roman No9 L",serif;
}

That’s it! Save your template/theme!

Well, you can vary the font style, background color, hover color, width and possibly everything just by modifying the CSS part alone (pretty self-explanatory). So, play around with the above CSS code and enjoy the effect. If you need some help, leave a comment below and I’ll help you out! Do share your opinions about the article via comments!

  • Author Bio

  • Latest Post

Article by Mukund

Mukund has written 29 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


TA

{ 3 comments… add one }

  • Unicom

    Thanks Mr. Mukund

    We can place accordion inside of another accordion and create a second tab inside the other?
    I need to create a category inside another category.

    Again thanks.

    Reply
  • Avinash

    Mukund, is there any way we can implement accordion in post pages in wordpress ..

    Reply
  • Amit

    Accordian effect is really great ,Thanks mukund for the article

    Reply

Leave a Comment