Javascript/jQuery Tutorials

Lesson 2: Accordions

How Do You Create Accordion Panes?

Let's learn!

Step 1

Again, becuase we are working with jQuery, you need to make sure you have the following code at the end of your HTML file, just above the closing body tag to load the jQuery library:

Step 1 Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
			

Step 2

Write your HTML file. Below is the code for putting Bruce Willis' photo and bio into an expandable/collapsable accordion pane. Again, pay close attention to all the classes.

Step 2 Code

<div class="accordion">
	<h3>Bruce Willis</h3>
	<div class="accordion-pane">
		<img src="images/bruce.jpg" alt="Picture of Bruce Willis">
		<p>Walter Bruce Willis (born March 19, 1955) is an American actor, producer and singer. His career began on the Off-Broadway stage and then in television in the 1980s, most notably as David Addison in Moonlighting (1985–89). He is perhaps best known for his role of John McClane in the Die Hard series, which were mostly critical and uniformly financial successes. He has appeared in over sixty films, including Color of Night (1994), Pulp Fiction (1994), 12 Monkeys (1995), The Fifth Element (1997), Armageddon (1998), The Sixth Sense (1999), Unbreakable (2000), Sin City (2005), Red (2010) and The Expendables 2 (2012).</p>
		<p>Motion pictures featuring Willis have grossed US$2.64 billion to $3.05 billion at North American box offices, making him the eighth highest-grossing actor in a leading role and 12th-highest including supporting roles. He is a two-time Emmy Award–winning, Golden Globe Award–winning and four-time Saturn Award–nominated actor. Willis was married to actress Demi Moore and they had three daughters before their divorce in 2000, following thirteen years of marriage. Since 2009, he has been married to model Emma Heming, with whom he has two daughters.</p>
	</div>

Step 3

Now style it up with some CSS.

Step 3 Code

.accordion h3 {
	position: relative;
	font-size: 20px;
	background-color: #003366;
	color: #fff;
	cursor: pointer;
	margin: 10px 0;
	padding: 8px 0;
}

.accordion h3:after {
	content: "+";
	position: absolute;
	right: 8px;
	bottom: 2px;
	font-size: 1.6em;
}

.accordion .minus:after {
	content: "-";
	right: 14px;
	font-size: 1.6em;	
}

.accordion-pane img {
	float: left;
	width: 220px;
}

.accordion-pane p {
	float: right;
	width: 75%;
	margin-bottom: 10px;
}

Step 4

And now for the Javascript/jQuery code. There are 2 versions of code you can use — one that only has a maximum of one accordion pane open at any given time (as seen in the Demo on the home page), and one that lets you open as many panes as you wish (as this page does).

Step 4 Code v. 1 - only one pane open at a time

$('.accordion').children('div').hide();
var $titleBar = $('.accordion h3');

$titleBar.click(function() {
	var $this = $(this);
	var thisPane = $(this).next();

	if(thisPane.is(':visible')) {
		thisPane.slideToggle();
		$this.removeClass('minus');
	} else {
			$('.accordion > div:visible').slideToggle();
			$titleBar.removeClass('minus');
			thisPane.slideToggle();
			$this.addClass('minus');
	}

});

Step 4 Code v. 2 - open as many panes as you want

$('.accordion').children('div').hide();
var $titleBar = $('.accordion h3');

$titleBar.click(function() {
	var $this = $(this);
	var thisPane = $(this).next();

	if(thisPane.is(':visible')) {
		$this.removeClass('minus');
	} else {
			$this.addClass('minus');
	}
	thisPane.slideToggle();
});

Check you out, now you can place content into accordion panes!