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)


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.