gists-app-test/jquery.h5Accordion.a11y.example.html

## jquery.h5Accordion.a11y.example.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>JQuery h5Accordion example</title>
	</head>
	<body>
		<h1>JQuery h5Accordion example</h1>

		<div class="accordion" data-accordiontxt='{"open":"Afficher le contenu","close":"Masquer le contenu"}'>
			<h2 class="accordion-trigger">Quam ob rem cave Catoni</h2>
			<ul class="accordion-panel">
				<li>Quam ob rem vita quidem talis fuit vel fortuna vel</li>
				<li>Cuius acerbitati uxor grave accesserat incentivum,</li>
				<li>Ideoque fertur neminem aliquando ob haec vel</li>
				<li>Sed maximum est in amicitia parem esse inferiori.</li>
				<li>Quam ob rem cave Catoni anteponas ne istum quidem</li>
			</ul>

			<h2 class="accordion-trigger">Ex turba vero</h2>
			<ul class="accordion-panel">
				<li>Nisi mihi Phaedrum, inquam, tu mentitum aut</li>
				<li>Quam quidem partem accusationis admiratus sum et</li>
				<li>Metuentes igitur idem latrones Lycaoniam magna</li>
				<li>Et interdum acciderat, ut siquid in penetrali</li>
				<li>Ex turba vero imae sortis et paupertinae in</li>
			</ul>
		</div>

		<script src="jquery.min.js"></script>
		<script src="jquery.h5Accordion.a11y.js"></script>
		<script>
			$(document).ready(function(){
				h5Accordion.init();
			});
		</script>
	</body>
</html>

## jquery.h5Accordion.a11y.js
// h5Accordion: Affiche du contenu caché au clique, communément appelé «accordéon»
// @OPTION node: Ajouter un sélecteur particulier. Par défaut ".accordion".
// @OPTION trigger: Changer le sélecteur qui déclenche l'ouverture/fermeture de l'accordéon. Par défaut ".accordion-trigger".
// @OPTION panel: Changer le sélecteur du panneau de contenu. Par défaut ".accordion-panel".
// @OPTION oneAtaTime: si la valeur est true un seul panneau est affiché à la fois. Par défaut à false.
// @USAGE h5Accordion.init(); || h5Accordion.init({node:".newSelector", onePanelAtaTime:true});
// @TODO Translate into English
var h5Accordion = (function(){

	return {
		init:function(options){
			//Options par default
			var defOptions = {
				node : ".accordion",
				trigger : ".accordion-trigger",
				panel : ".accordion-panel",
				onePanelAtaTime : false
			};

			//Fusionner les options par défaut et les options paramétrées.
			var options = $.extend({}, defOptions, options),
				$accordion = $(options.node); //Le bloc qui contient les accordéons.

			if($accordion.length!=0){
				var $trigger = $accordion.find(options.trigger), //Bouton qui controle l'ouverture ou la fermature des panneaux
					$panel = $accordion.find(options.panel), //Panneau qui contient le contenu
					txtOpen = $accordion.data("accordiontxt").open,
					txtClose = $accordion.data("accordiontxt").close,
					txtOpenCloseClass = ".txtOpenClose",
					txtOpenClose = "<span aria-live='polite' class='visuallyhidden "+ txtOpenCloseClass.slice(1) +"'>"+ txtOpen +"</span>";

				$accordion.addClass("h5Accordion");
				$panel
					.hide() //Au chargement on cache les panneaux de l'accordéon
					.addClass("h5Accordion-panel");

				//On transforme le <span/> en <button/> pour indiquer qu'il y a une action rataché à cet élément
				$trigger.each(function(){
					var $that = $(this),
						prevTag = $that.get(0).tagName.toLowerCase();

					//Utilise la méthode .slice() pour outrepasser le point au début de la chaîne
					$that.replaceWith("<button class='"+ options.trigger.slice(1) +" "+ prevTag +"'>"+ $that.text() + " " + txtOpenClose +"</button>");
				});

				//Redéfinir la variable pour tenir compte du changement de balise span.accordion-trigger => button.accordion-trigger
				$trigger = $accordion.find(options.trigger);

				$trigger.each(function(){
					var $that = $(this),
						$txtOpenClose = $that.find(txtOpenCloseClass);

					$that
						.addClass("h5Accordion-trigger")
						.on("click",function(){
							if($that.next($panel).not(":visible").length!=0){ //Au clic Si le panneau n'est pas visible on l'affiche
								if(options.onePanelAtaTime === true && $panel.length > 1){ //Si on veut un seul panneau à la fois alors on cache tout les autres avec d'ouvrir le panneau courant
									$panel.slideUp("fast");
									$trigger
										.find(txtOpenCloseClass)
										.text(txtOpen);
								}
								$that
									.addClass("open")
									.next($panel).slideDown("fast");

								$txtOpenClose.text(txtClose);
							} else { //Sinon on cache le panneau
								$that
									.removeClass("open")
									.next($panel).slideUp("fast");

								$txtOpenClose.text(txtOpen);
							}
						});
				});
			}
		}
	};
})();
//\
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>JQuery h5Accordion example</title>
	</head>
	<body>
	<h1>JQuery h5Accordion example</h1>

	<div class="accordion" data-accordiontxt='{"open":"Afficher le contenu","close":"Masquer le contenu"}'>
	<h2 class="accordion-trigger">Quam ob rem cave Catoni</h2>
	<ul class="accordion-panel">
	<li>Quam ob rem vita quidem talis fuit vel fortuna vel</li>
	<li>Cuius acerbitati uxor grave accesserat incentivum,</li>
	<li>Ideoque fertur neminem aliquando ob haec vel</li>
	<li>Sed maximum est in amicitia parem esse inferiori.</li>
	<li>Quam ob rem cave Catoni anteponas ne istum quidem</li>
	</ul>

	<h2 class="accordion-trigger">Ex turba vero</h2>
	<ul class="accordion-panel">
	<li>Nisi mihi Phaedrum, inquam, tu mentitum aut</li>
	<li>Quam quidem partem accusationis admiratus sum et</li>
	<li>Metuentes igitur idem latrones Lycaoniam magna</li>
	<li>Et interdum acciderat, ut siquid in penetrali</li>
	<li>Ex turba vero imae sortis et paupertinae in</li>
	</ul>
	</div>

	<script src="jquery.min.js"></script>
	<script src="jquery.h5Accordion.a11y.js"></script>
	<script>
	$(document).ready(function(){
	h5Accordion.init();
	});
	</script>
	</body>
	</html>
	// h5Accordion: Affiche du contenu caché au clique, communément appelé «accordéon»
	// @OPTION node: Ajouter un sélecteur particulier. Par défaut ".accordion".
	// @OPTION trigger: Changer le sélecteur qui déclenche l'ouverture/fermeture de l'accordéon. Par défaut ".accordion-trigger".
	// @OPTION panel: Changer le sélecteur du panneau de contenu. Par défaut ".accordion-panel".
	// @OPTION oneAtaTime: si la valeur est true un seul panneau est affiché à la fois. Par défaut à false.
	// @USAGE h5Accordion.init(); \|\| h5Accordion.init({node:".newSelector", onePanelAtaTime:true});
	// @TODO Translate into English
	var h5Accordion = (function(){

	return {
	init:function(options){
	//Options par default
	var defOptions = {
	node : ".accordion",
	trigger : ".accordion-trigger",
	panel : ".accordion-panel",
	onePanelAtaTime : false
	};

	//Fusionner les options par défaut et les options paramétrées.
	var options = $.extend({}, defOptions, options),
	$accordion = $(options.node); //Le bloc qui contient les accordéons.

	if($accordion.length!=0){
	var $trigger = $accordion.find(options.trigger), //Bouton qui controle l'ouverture ou la fermature des panneaux
	$panel = $accordion.find(options.panel), //Panneau qui contient le contenu
	txtOpen = $accordion.data("accordiontxt").open,
	txtClose = $accordion.data("accordiontxt").close,
	txtOpenCloseClass = ".txtOpenClose",
	txtOpenClose = "<span aria-live='polite' class='visuallyhidden "+ txtOpenCloseClass.slice(1) +"'>"+ txtOpen +"</span>";

	$accordion.addClass("h5Accordion");
	$panel
	.hide() //Au chargement on cache les panneaux de l'accordéon
	.addClass("h5Accordion-panel");

	//On transforme le <span/> en <button/> pour indiquer qu'il y a une action rataché à cet élément
	$trigger.each(function(){
	var $that = $(this),
	prevTag = $that.get(0).tagName.toLowerCase();

	//Utilise la méthode .slice() pour outrepasser le point au début de la chaîne
	$that.replaceWith("<button class='"+ options.trigger.slice(1) +" "+ prevTag +"'>"+ $that.text() + " " + txtOpenClose +"</button>");
	});

	//Redéfinir la variable pour tenir compte du changement de balise span.accordion-trigger => button.accordion-trigger
	$trigger = $accordion.find(options.trigger);

	$trigger.each(function(){
	var $that = $(this),
	$txtOpenClose = $that.find(txtOpenCloseClass);

	$that
	.addClass("h5Accordion-trigger")
	.on("click",function(){
	if($that.next($panel).not(":visible").length!=0){ //Au clic Si le panneau n'est pas visible on l'affiche
	if(options.onePanelAtaTime === true && $panel.length > 1){ //Si on veut un seul panneau à la fois alors on cache tout les autres avec d'ouvrir le panneau courant
	$panel.slideUp("fast");
	$trigger
	.find(txtOpenCloseClass)
	.text(txtOpen);
	}
	$that
	.addClass("open")
	.next($panel).slideDown("fast");

	$txtOpenClose.text(txtClose);
	} else { //Sinon on cache le panneau
	$that
	.removeClass("open")
	.next($panel).slideUp("fast");

	$txtOpenClose.text(txtOpen);
	}
	});
	});
	}
	}
	};
	})();
	//\