Support » Themes and Templates » How To Display Hierarchical terms in jquery accordion?

  • I have a table of contents constructed as follows.
    Taxonomy = table of contents
    Parent terms = chapters
    Child terms = sections
    Posts are attached to child terms only.

    I want to embed the resulting list in a jquery accordion. This accordion will be nested so that when the accordion is opened it reveals the chapters and clicking on a chapter heading reveals a list of sections. Clicking on a section reveals a list of posts.

    I know its possible to hard code this solution but I would like to produce this by getting each chapter(term) in turn and then underneath it getting the child terms and finally the associated posts.

    I can produce the top level easily showing the list of chapters by using a foreach loop, but I can’t see a way to display the second and third levels. The following code doesn’t work at the second level but helps illustrate the problem:

    <div id="accordion">
    			// Parameter Settings for Chapters
    				$taxonomy = "chapters";
    				$parent = 0;
    				$child_of = 0;
    				$hide_empty = 0;
    			// Parameter Settings for Sections
    				$fields = $parent;
    			// Set up arguments for Chapter Titles
    				$args = array(
    				'parent' => $parent,
    				'hide_empty'=> $hide_empty
    			// Set up section
    					"child_of" => $parent
    				 $terms = get_terms($taxonomy, $args);
    				 	$count = count($terms);
    				 		if ( $count > 0 ){
    					 		foreach ( $terms as $term ) {
    						 		echo "<h3><a href='".get_term_link( $term, $taxonomy )."'>". $term->name . "</a></h3><div>";
    						 		$sectionterms=get_terms("chapters", $sectionargs);
    						 		 $countsectionterms = count($sectionterms);
    						 		 	if ($countsectionterms>0){
    							 		foreach ($sectionterms as $sectionterm){
    							 		echo "<h3>". $sectionterm->name."</h3></div>";
    	</div><!-- End Accordion -->

    The problem I believe is that for this approach to work you would have to put the second, and then the third loop, within the first ‘echo’ statement. This doesn’t seem possible.

    I’d appreciate any pointers as to how to make this approach work or perhaps alternative ways of getting the same result.


  • The topic ‘How To Display Hierarchical terms in jquery accordion?’ is closed to new replies.