Advanced Search

WordPress Taxonomies Accordion 3 Levels

/ Published in: PHP
Save to your folder(s)
//This will grab taxonomies three levels deep (parent, child, grandchild) and display them
//in an accordion fashion. Parent is the header, then child with a checkbox, if checked, will
//display grandchild taxonomies.

//Uses jQuery Accordion (docs.jquery.com/UI/Accordion)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //This will grab taxonomies three levels deep (parent, child, grandchild) and display them
  2. //in an accordion fashion. Parent is the header, then child with a checkbox, if checked, will
  3. //display grandchild taxonomies.
  4.  
  5. //Uses jQuery Accordion (docs.jquery.com/UI/Accordion)
  6.  
  7. <?php 
  8. 	$taxonomyName = "aisle-category";
  9. 	//This gets top layer terms only.  This is done by setting parent to 0.  
  10. 	$parent_terms = get_terms($taxonomyName, array('parent' => 0, 'orderby' => 'slug', 'hide_empty' => false));   
  11. 	echo "<div id='accordion'>";
  12. 		foreach ($parent_terms as $pterm) {
  13.     			//Get the Child terms
  14.     			echo "<h3 class='aisleHeading'>".htmlspecialchars($pterm->name)."</h3>";
  15.     			echo "<div style='display:none'>";
  16.     			$cterms = get_terms($taxonomyName, array('child_of' => $pterm->term_id, 'parent' => $pterm->term_id, 'orderby' => 'group_name', 'hide_empty' => false));
  17.  
  18. 			echo "<ul class='childTerms'>";
  19. 				foreach ($cterms as $cterm) {
  20. 					//now lets get the grandchildren terms. these terms we will use to populate the shopping list form
  21. 					$gcterms = get_terms($taxonomyName, array('child_of' => $cterm->term_id, 'orderby' => 'group_name', 'hide_empty' => false));
  22.     					echo "<li class='childTermHeading'><span>".htmlspecialchars($cterm->name)."<input type='checkbox' value='".htmlspecialchars($cterm->name)."' id='".preg_replace('/[ )(.-.,.&.;]/','',$cterm->name)."' name='".htmlspecialchars($cterm->name)."'/></span>";
  23.  
  24.     						echo "<ul id='gcTerms-".preg_replace('/[ )(.-.,.&.;]/','',$cterm->name)."' class='gcTerms hidden' style='margin-left: 10px;'>";
  25.     							echo "<li class='letsCheck'><div><input type='checkbox' class='checkall'> Check All</div>";
  26.     							foreach ($gcterms as $gcterm) {
  27.         							echo "<li><input type='checkbox' name='{$gcterm->term_id}' value='{$gcterm->term_id}' onclick='childItemClick(this, \"".addslashes($gcterm->name)."\");'><label for='".addslashes($gcterm->name)."'>".htmlspecialchars($gcterm->name)."</label></li>"; 
  28.     							}//end foreach $gcterms
  29.     						echo "</ul>";
  30.  
  31.     					echo "</li>";
  32.     				}//end of foreach $cterms
  33.     			echo "</ul>";
  34.     		echo "</div>";
  35. 		}//end of foreach $parent_terms
  36. 	echo "</div>";
  37. ?>
  38. <script type="text/javascript">
  39. jQuery(document).ready(function($){
  40.     jQuery('#accordion').accordion({active: false, collapsible: true});   							
  41. 	jQuery('.childTermHeading span input').click( function() {
  42. 		jQuery('#gcTerms-' + $(this).attr('id')).toggle();
  43. 	});
  44.  
  45. 	jQuery('.checkall').click(function () {
  46. 		jQuery(this).parents('ul:eq(0)').find(':checkbox').attr('checked', this.checked);
  47.     	});
  48. });//thats all folks
  49. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.