A simple accordian made using php to load json files. jQuery added for behaviors. > https://github.com/mustafa-x/DT-phpAccordian

answers.json

{"answers":
  {
	"0":"<p>The first thing we need is for you to tell us which titles you'd like to rent, otherwise we won't be able to send you anything as we won't know which of our 70,000 titles you want us to send to you.</p><p>The way you do this is simply by adding titles to your list - which is known as the \"My Rental List\". You can add a title to your list using the \"Rent\" or \"Add\" button displayed next to its name wherever you see the title displayed on our website. You can see this button in lots of places on our website after you've registered an account with us. For example it's next to all the titles on our home page after you've logged in, it's in the search results when looking for a title, and it's on the page you see when you've clicked on a title to read more about it.</p><p>Once you have created a list of titles, there is nothing more you need to do, we'll automatically select your first rentals from the list you've created and send them out to you on the next working day. We recommend having at least 10 titles on your list at all times, or there can be delays in sending your next rental. To save you from having to keep topping up the list regularly, feel free to add far more than 10 titles, the more the better!</p>","question_number":"0",
	
	"1":"<p>With our service, you don't need to process an \"order\" each time you want to rent a title.</p><p>We'll start sending you rentals shortly after you've registered and created a list of titles that you'd like to rent, which is called the My Rental List. You can add a title to your list using the \"Rent\" or \"Add\" button displayed next to its name wherever you see the title displayed on our website after you've signed in.</p><p>Once you have created a list of titles, there is nothing more you need to do, no 'order' as such needs to be made, we'll simply select your first rentals from the list you've created and send them out to you on the next working day. We recommend having at least 10 titles on your list at all times, or there can be delays in sending your next rental. To save you from having to keep topping up the list regularly, feel free to add far more than 10 titles, the more the better!</p><p>If you find that you'd like to see certain titles sooner than others then you can indicate this to us by setting those titles to be at High Priority, and the rest at Medium or Low Priority. We can't always promise we will always be able to send your highest priority titles as your next disc, but we will always do our very best to try whenever you tell us which ones they are with the priority buttons.</p>","question_number":"1",

	"2":"<p>The number of discs you can have at home at any one time depends on the package you take. Our service works on a subscription basis, and we send you either 1, 2, or 3 discs at a time from a list of DVDs you select. When you return a disc we send the next one.</p><p>You can see the full list of our current packages <a href=\"http://www.lovefilm.com/dvd-rental/\">here</a> (just click on \"Packages\")</p><p>If you want to change the package you're currently on, simply go to the Change Package page to go to the list of packages we currently offer and pick the right one for you.(Please note however that this is not available to customers who are currently enjoying either a free trial period or a gift subscription).</p>","question_number":"2"
	}
}

behavior.js

// jQuery
$(document).ready(function (){
  // if js is present we remove the no-script class from the body. 
	// no-script displays all of the menu items and prevents them from being hidden.
	$("body").removeClass("no-script").addClass("js");

	// The first item in our stack / accordian is expanded. First we want to target it.
	var openStack = $(".expanded");

	// Now we want to hide all the other stacks / accodian menu items
	$(".faq_question").find("div:not(.expanded)").hide();

	// A bit of bubble magic....
	// We place a click event on the each stack / accodian menu container
	$(".faq_question").click(function (e) {
		$container = $(this);
		$h1 = $container.find("h1");
		$div = $container.find("div");
		$plus = $(".plus");

		// This is to check what has been click
		var t = e.target; 

		// This gives us a true or false. What its check is to see if a H1 tag has been click, if so its true
		// if not then its false.
		var compare = t.tagName == $h1.get(0).tagName;

		// Now we check to see if the clicked item is a H1 and is NOT expanded. 
		if (compare && !$div.hasClass("expanded")) {
			// Then we remove the plus class to the currently expanded stack...
			$plus.removeClass("plus").addClass("minus");
			// ...and add it to the newly clicked menu heading...
			$h1.addClass("plus").removeClass("minus");

			//...then we close the currently opened stack...
			openStack.removeClass("expanded").slideUp();

			//...and open the newly clicked stack content...
			$div.slideDown().addClass("expanded");
			
			//...and finally we reset the variable so its set to the newly open/expanded/selected stack.
			openStack = $div;
		}
		return false;
	})
});

home.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
	<title>Simple Accordion with php, json & jQuery</title>
	<link rel="stylesheet" type="text/css" href="includes/css/styles.css">
	<?php
		// Requests to load and parse the json files. 
		$jsonQuestions= file_get_contents("includes/json/questions.json", true); 
		$decodedJQ = json_decode($jsonQuestions, true);
		$numberOfQuestions = sizeof($decodedJQ[questions]);

		$jsonAnswers = file_get_contents("includes/json/answers.json", true);
		$decodeJA = json_decode($jsonAnswers, true);
	?>
</head>
<body>
<div id="wrapper">

<?php
	// Simple for loop that lists each question and each answer. 
	for ($i=0; $i < $numberOfQuestions; $i++) { 
		echo "<article class='faq_container'><section class='faq_question'><header class='faq_header'>";

		// This if state checks to see if the current item we are looping is first.
		// If it is we add a class selector .plus if not we add .minus
		// The .plus and .minus selectors are simply the - & + signs in the accordian. 
		// With jQuery we add and remove them according to the currently selected menu. 
		
		if ( $i==0 ) { 
			echo "<h1 class='plus'>";
			echo $decodedJQ[questions][$i];
			echo "</h1></header><div class='expanded'>";
		}else {
			echo "<h1 class='minus'>";
			echo $decodedJQ[questions][$i];
			echo "</h1></header><div>";
		}
		echo $decodeJA[answers][$i];
		echo "</div></section></article>";
	}
?>
 
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="includes/js/behaviour.js"></script>
</body>
</html>

questions.json

{"questions":
  {
	"0":"I’ve registered, but how do I start getting rental discs sent out to me?",
	"1":"How do I order a title I want to rent?",
	"2":"How many discs can I have at home at any one time and how much does it cost?"
	}
}

styles.css

/* *
* Reset
*/
html, body, body div, h1, p, header {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
/* Border-Box is a must for me. What this does is calculates the real width of an 
object including the padding. */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

article, section {display: block;}
html {overflow-y: scroll;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
  
a:hover, a:active {outline: none;}


body, p {font: 11pt Arial, sans-serif;}

a {color: #03f;}
a:hover {color: #69f;}

a:link {-webkit-tap-highlight-color: #fcd700;}

/**
* FAQ Styles 
**/
#wrapper { margin: 0 auto; position: relative; width: 625px;}

/*
* FAQ 
*/
#faq_q1 { }
.faq_container { clear: both; margin-bottom: 15px;}
.faq_question { }

.faq_header { position: relative; }
.faq_header h1 {  color: #FFFFFF; margin-bottom: 15px; padding: 5px 6px;
-moz-user-select: none; 
-khtml-user-select: none; 
-webkit-user-select: none; 
-o-user-select: none; 
background: #000044; 
cursor: pointer;  
position: relative;
}

.faq_header h1.plus:after,
.faq_header h1.minus:after {
  background: none repeat scroll 0 0 #FFFFFF;
  color: #000044;
  content: "+";
  font-size: 1.5em;
  display: block;
  position: absolute;
  height: 21px;
  line-height: 1em;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 20px;
  right: 4px;
  top: 4px;
}

.faq_header h1.minus:after {
  content: "-";
}

.faq_expand { height: 24px; position: absolute; right: 4px; top: 0px;  width: 24px; border: none;}
.faq_expand.collapsed { background-position: 0 -28px; }
.faq_question div { margin-bottom: 15px; }
.faq_question div.expanded  { height: auto; display: block; }
.no-script .faq_question div { display: block; }

.faq_question p { margin-bottom: 10px;}