Return to Snippet

Revision: 59166
at August 22, 2012 02:21 by dnnsldr


Initial Code
//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)

<?php 
	$taxonomyName = "aisle-category";
	//This gets top layer terms only.  This is done by setting parent to 0.  
	$parent_terms = get_terms($taxonomyName, array('parent' => 0, 'orderby' => 'slug', 'hide_empty' => false));   
	echo "<div id='accordion'>";
		foreach ($parent_terms as $pterm) {
    			//Get the Child terms
    			echo "<h3 class='aisleHeading'>".htmlspecialchars($pterm->name)."</h3>";
    			echo "<div style='display:none'>";
    			$cterms = get_terms($taxonomyName, array('child_of' => $pterm->term_id, 'parent' => $pterm->term_id, 'orderby' => 'group_name', 'hide_empty' => false));
    									
			echo "<ul class='childTerms'>";
				foreach ($cterms as $cterm) {
					//now lets get the grandchildren terms. these terms we will use to populate the shopping list form
					$gcterms = get_terms($taxonomyName, array('child_of' => $cterm->term_id, 'orderby' => 'group_name', 'hide_empty' => false));
    					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>";
    										
    						echo "<ul id='gcTerms-".preg_replace('/[ )(.-.,.&.;]/','',$cterm->name)."' class='gcTerms hidden' style='margin-left: 10px;'>";
    							echo "<li class='letsCheck'><div><input type='checkbox' class='checkall'> Check All</div>";
    							foreach ($gcterms as $gcterm) {
        							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>"; 
    							}//end foreach $gcterms
    						echo "</ul>";
    									
    					echo "</li>";
    				}//end of foreach $cterms
    			echo "</ul>";
    		echo "</div>";
		}//end of foreach $parent_terms
	echo "</div>";
?>
<script type="text/javascript">
jQuery(document).ready(function($){
    jQuery('#accordion').accordion({active: false, collapsible: true});   							
	jQuery('.childTermHeading span input').click( function() {
		jQuery('#gcTerms-' + $(this).attr('id')).toggle();
	});
	
	jQuery('.checkall').click(function () {
		jQuery(this).parents('ul:eq(0)').find(':checkbox').attr('checked', this.checked);
    	});
});//thats all folks
</script>

Initial URL


Initial Description
//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)

Initial Title
WordPress Taxonomies Accordion 3 Levels

Initial Tags
wordpress, jquery

Initial Language
PHP