Today I was working on some of my content over at TC Web Development and needed to add some functionality to one of my pages that would update page content based on what content was visible in a jQuery accordion. After some tinkering I was able to figure out a way to do this and figured I would share as I did not find any other information on the web that achieved the desired effect.

The first thing you will need to do to accomplish this is to download jQuery at jQuery. Next, you will need a copy of the jQuery UI. I would suggest creating a custom theme with ThemeRoller that fits into your website’s scheme. The page to do this is located at jQuery UI. Once you have all of the files (it should be 2 javascript files, 1 css file, and a number of image files,) you will want to include them in the head section of your page like you would any other javascript and css file.

Next you will want to add a div to your page that will be the target for content. Let’s give that div and id of content. Next you will need a div for the accordion. I will call the example div’s id accordion for simplicity. Within the div for the accordion we will use jQuery’s sample code. As I want to change content based on the content of each accordion panel, I will give each starting paragraph within the panel an id (p tag). You can use CSS to position these elements as you would like to. You can see the code at jQuery Accordion to get an idea of how the accordion is setup, but the following is a good idea of how your code will look.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<div id="content"></div>
<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p id="one">
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p id="two">
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p id="three">
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>		
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p id="four">
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		</p>		
	</div>
</div>

Next we will need to add some code to make the accordion behave as an accordion. Assuming you have included your jQuery files correctly, this is quite simple and will look something like this.

1
2
3
4
5

<script type="text/javascript">	
$(document).ready(function(){  	
    $("#accordion").accordion();  
  });
</script>

Basically on line 3 we tell the accordion div that it is an accordion. jQuery will do the rest! The next thing we want to do is come up with some content. You can do this directly in your javascript or in PHP beforehand. I chose to do it in PHP so that the initial display would be easier. Create page content (html) for each accordion panel (what you want your content div to display) and assign it to a javascript hash table. Now your code will look something like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
$one = "<p>Content for panel 1</p>";
$two = "<p>Content for panel 2</p>";
$three = "<p>Content for panel 3</p>";
$four = "<p>Content for panel 4</p>";
?>
<script type="text/javascript">	
	var samplesArray = new Array();
	samplesArray['one'] = "<?php echo $one; ?>";
	samplesArray['two'] = "<?php echo $two; ?>";
	samplesArray['three'] = "<?php echo $three; ?>";
	samplesArray['four'] = "<?php echo $four; ?>";
 
  $(document).ready(function(){  	
    $("#accordion").accordion();  
  });  
  </script>

Of Note

From here things are fairly simple. We will simply add a funtion that fires on the change event of the accordion. This function will grab the id of the active accordion content after the accordion changes and use it to determine what content to put in the the content div. The code will look something like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">	
	var samplesArray = new Array();
	samplesArray['one'] = "<?php echo $one; ?>";
	samplesArray['two'] = "<?php echo $two; ?>";
	samplesArray['three'] = "<?php echo $three; ?>";
	samplesArray['four'] = "<?php echo $four; ?>";
 
   $(document).ready(function(){
  	var options = {     
      change: function(e, ui) {      	 
       $("#content").html(samplesArray[ui.newContent.attr("id")]);
     }}
    $("#accordion").accordion(options);
 
  });
  </script>

Of Note

That’s it, your accordion will now update the content div based on what accordion panel is selected. To see this in practical action, please feel free to check out TC Web Development’s Portfolio Page which uses it to change an image within the page based on what is selected in the accordion.

AJAX · css · development · Javascript · jQuery · jQuery UI · PHP · tutorial

3 comments

<< Using jQuery to Add Minimize/Maximize to WordPress Sidebar Widgets

Site Status >>