Accordion Sidebar Menu

Shows all the children under the current root item and all other root items.

function jma_sidebar_addon() {
	global $post;
	$ancestors = get_ancestors( $post->ID, 'page' );
	$ancestor_id = array_pop($ancestors);
	$ancestor_id = $ancestor_id? $ancestor_id: $post->ID;
	$root_pages = get_pages(array('parent' => 0));
	echo '<ul>';
	foreach ($root_pages as $root_page) {
		$jma_classes = '';
		$show_kids = false;
		$has_kids = false;
		if( $root_page->ID == $ancestor_id || $root_page->ID == $post->ID ){
			$jma_classes .= ' show-children';
			$show_kids = true;
		}
		$children = get_pages('child_of='.$root_page->ID);
		if( count( $children ) != 0 ){
			$jma_classes .= ' has-cildren';
			$has_kids = true;
		}
		echo '<li class="page_item page-item-' . $root_page->ID . $jma_classes . '"><a href="' . get_page_link( $root_page->ID ) .'">' .  $root_page->post_title . '</a>';
		if( $show_kids && $has_kids ){
			echo '<ul>';
				wp_list_pages(array("child_of" => $ancestor_id,  "link_before" => "", "title_li" => "", "sort_column" => "title"));
			echo '</ul>';	      	
		}
		echo '</li>';	   
	}
	echo '<ul>';
}
add_action('themeblvd_sidebar_sidebar_left_before', 'jma_sidebar_addon');

function jma_sidebar_addon() {

global $post;

$ancestors = get_ancestors( $post->ID, 'page' );

$ancestor_id = array_pop($ancestors);

$ancestor_id = $ancestor_id? $ancestor_id: $post->ID;

$root_pages = get_pages(array('parent' => 0));

echo '<ul>';

foreach ($root_pages as $root_page) {

$jma_classes = '';

$show_kids = false;

$has_kids = false;

if( $root_page->ID == $ancestor_id || $root_page->ID == $post->ID ){

$jma_classes .= ' show-children';

$show_kids = true;

}

$children = get_pages('child_of='.$root_page->ID);

if( count( $children ) != 0 ){

$jma_classes .= ' has-cildren';

$has_kids = true;

}

echo '<li class="page_item page-item-' . $root_page->ID . $jma_classes . '"><a href="' . get_page_link( $root_page->ID ) .'">' . $root_page->post_title . '</a>';

if( $show_kids && $has_kids ){

echo '<ul>';

wp_list_pages(array("child_of" => $ancestor_id, "link_before" => "", "title_li" => "", "sort_column" => "title"));

echo '</ul>';

}

echo '</li>';

}

echo '<ul>';

}

add_action('themeblvd_sidebar_sidebar_left_before', 'jma_sidebar_addon');

This is the code for an accordion based on the portfolio_item post type (php):

function sidebar_portfolio_tax(){
	global $post; 
	$terms= get_the_terms($post->id, 'portfolio');
	if(is_array($terms))
		foreach($terms as $term){
			$this_term_ids[] = $term->term_id;
		}
	ob_start();
	$services = get_terms( 'portfolio', array('hierarchical' => false) );//stops empty parents from being included
	echo '<div class="panel-group event-accordion" id="accordion">';
	foreach ($services as $service) {
		$args = array(
			'post_type' => 'portfolio_item',
			'tax_query' => array(
				array(
					'taxonomy' => 'portfolio',
					'field' => 'id',
					'terms' => $service->term_id
				)
			), 
			'orderby' => 'title',
			'order' => 'ASC',
			'posts_per_page' => -1
			
		);
		$x = new WP_Query($args);
		if($x->have_posts()){
			$in = in_array($service->term_id, $this_term_ids)? ' in': '';//opens accordian to current category
			echo '<div class="panel">';// panel-default
			echo '<div class="">';//panel-heading
			echo '<a style="background-image: url(' . get_stylesheet_directory_uri() . '/grandchild-5-0/images/' . $service->slug . '.png)" class="service-cat ' . $service->slug . '" data-toggle="collapse" data-parent="#accordion" href="#collapse' . $service->term_id . '">';
			echo $service->name;
			echo '</a>';
			echo '</div><!--panel-heading-->';
			echo '<ul id="collapse' . $service->term_id . '" class="panel-collapse collapse' . $in . '">';
			while ( $x->have_posts() ) : $x->the_post();
					echo '<li>'; 
					echo '<a href="';
					the_permalink();
					echo '">';
					the_title();
					echo '</a>';
					echo '</li>';
			endwhile;
			wp_reset_postdata();
			echo '</ul></div><!--panel-default-->';
		}
	}
	echo '</div><!--panel-group-->';
	$x = ob_get_contents();
	ob_end_clean();
	return $x;
}

function sidebar_portfolio_tax(){

global $post;

$terms= get_the_terms($post->id, 'portfolio');

if(is_array($terms))

foreach($terms as $term){

$this_term_ids[] = $term->term_id;

}

ob_start();

$services = get_terms( 'portfolio', array('hierarchical' => false) );//stops empty parents from being included

echo '<div class="panel-group event-accordion" id="accordion">';

foreach ($services as $service) {

$args = array(

'post_type' => 'portfolio_item',

'tax_query' => array(

array(

'taxonomy' => 'portfolio',

'field' => 'id',

'terms' => $service->term_id

)

'orderby' => 'title',

'order' => 'ASC',

'posts_per_page' => -1

);

$x = new WP_Query($args);

if($x->have_posts()){

$in = in_array($service->term_id, $this_term_ids)? ' in': '';//opens accordian to current category

echo '<div class="panel">';// panel-default

echo '<div class="">';//panel-heading

echo '<a style="background-image: url(' . get_stylesheet_directory_uri() . '/grandchild-5-0/images/' . $service->slug . '.png)" class="service-cat ' . $service->slug . '" data-toggle="collapse" data-parent="#accordion" href="#collapse' . $service->term_id . '">';

echo $service->name;

echo '</a>';

echo '</div>';

echo '<ul id="collapse' . $service->term_id . '" class="panel-collapse collapse' . $in . '">';

while ( $x->have_posts() ) : $x->the_post();

echo '<li>';

echo '<a href="';

the_permalink();

echo '">';

the_title();

echo '</a>';

echo '</li>';

endwhile;

wp_reset_postdata();

echo '</ul></div>';

}

echo '</div>';

$x = ob_get_contents();

ob_end_clean();

return $x;

}

and the css:

.event-accordion ul {
	padding-left: 0;
	margin-bottom: 0;
}
.event-accordion ul li {
	list-style: none;
	border-bottom: solid 1px #eeeeee;
	background-color: #999999;
	text-align: right;
}
.event-accordion ul li:hover {
	background-color: #eeeeee;
}
/* optional chevron
.event-accordion ul li:after {
	font-family:'FontAwesome';
	content: "\f054";
	float: right;
	color: #97c1da;
}*/
.event-accordion .panel {
	margin: 0!important;
	border-width: 0!important;
}
.event-accordion .panel > div {
	text-align: right;
}
.event-accordion a {
	padding: 10px 20px 10px 5px;
	display: block;	
}
.event-accordion .service-cat  {
	min-height: 45px;
	background-color: #a3a3a2;
	color: #ffffff;
	background-repeat: no-repeat;
	/*border-top: solid 1px #ffffff;*/
}
.event-accordion .service-cat:hover {
	background-color: #666666;
}

.event-accordion ul {

padding-left: 0;

margin-bottom: 0;

}

.event-accordion ul li {

list-style: none;

border-bottom: solid 1px #eeeeee;

background-color: #999999;

text-align: right;

}

.event-accordion ul li:hover {

background-color: #eeeeee;

}

/* optional chevron

.event-accordion ul li:after {

font-family:'FontAwesome';

content: "\f054";

float: right;

color: #97c1da;

}*/

.event-accordion .panel {

margin: 0!important;

border-width: 0!important;

}

.event-accordion .panel > div {

text-align: right;

}

.event-accordion a {

padding: 10px 20px 10px 5px;

display: block;

}

.event-accordion .service-cat {

min-height: 45px;

background-color: #a3a3a2;

color: #ffffff;

background-repeat: no-repeat;

/*border-top: solid 1px #ffffff;*/

}

.event-accordion .service-cat:hover {

background-color: #666666;

}

If we want to create an horizontal menu instead:

function aux_menu(){
	global $post; 
	$terms= get_the_terms($post->id, 'portfolio');
	if(is_array($terms))
		foreach($terms as $term){
			$this_term_ids[] = $term->term_id;
		}
	ob_start();
	$services = get_terms( 'portfolio', array('hierarchical' => false, 'orderby' => 'slug') );//echo '<pre>';print_r($services);echo '</pre>';
	echo '<div class="aux-menu clearfix "><div>';
	echo '<ul class="sf-menu sf-menu-with-fontawesome">';
	foreach ($services as $service) {
		$args = array(
			'post_type' => 'portfolio_item',
			'tax_query' => array(
				array(
					'taxonomy' => 'portfolio',
					'field' => 'id',
					'terms' => $service->term_id
				)
			), 
			'orderby' => 'title',
			'order' => 'ASC',
			'posts_per_page' => -1
			
		);
		$x = new WP_Query($args);
		if($x->have_posts()){
			$active = in_array($service->term_id, $this_term_ids)? ' current': '';
			echo '<li class="menu-item level-1 ' . $service->slug . $active . '">';
			echo '<button class="menu-btn sf-with-ul" >';
			echo $service->name;
			echo '</button>';
			echo '<ul class="sub-menu non-mega-sub-menu">';
			while ( $x->have_posts() ) : $x->the_post();
					echo '<li class="menu-item level-2">'; 
					echo '<a class="menu-btn" href="';
					the_permalink();
					echo '">';
					the_title();
					echo '</a>';
					echo '</li>';
			endwhile;
			wp_reset_postdata();
			echo '</ul><!--sub-menu-->';
			echo '</li><!--menu-item level-1-->';
		}
	}
	echo '</ul></div></div><!--aux-menu-->';
	$x = ob_get_contents();
	ob_end_clean();
	echo $x;
}

function aux_menu(){

global $post;

$terms= get_the_terms($post->id, 'portfolio');

if(is_array($terms))

foreach($terms as $term){

$this_term_ids[] = $term->term_id;

}

ob_start();

$services = get_terms( 'portfolio', array('hierarchical' => false, 'orderby' => 'slug') );//echo '<pre>';print_r($services);echo '</pre>';

echo '<div class="aux-menu clearfix "><div>';

echo '<ul class="sf-menu sf-menu-with-fontawesome">';

foreach ($services as $service) {

$args = array(

'post_type' => 'portfolio_item',

'tax_query' => array(

array(

'taxonomy' => 'portfolio',

'field' => 'id',

'terms' => $service->term_id

)

'orderby' => 'title',

'order' => 'ASC',

'posts_per_page' => -1

);

$x = new WP_Query($args);

if($x->have_posts()){

$active = in_array($service->term_id, $this_term_ids)? ' current': '';

echo '<li class="menu-item level-1 ' . $service->slug . $active . '">';

echo '<button class="menu-btn sf-with-ul" >';

echo $service->name;

echo '</button>';

echo '<ul class="sub-menu non-mega-sub-menu">';

while ( $x->have_posts() ) : $x->the_post();

echo '<li class="menu-item level-2">';

echo '<a class="menu-btn" href="';

the_permalink();

echo '">';

the_title();

echo '</a>';

echo '</li>';

endwhile;

wp_reset_postdata();

echo '</ul>';

echo '</li>';

}

echo '</ul></div></div>';

$x = ob_get_contents();

ob_end_clean();

echo $x;

}

Then style it including current distinctions and going to vertical accordion at 768px (first the css):

@media (max-width: 768px){
.aux-menu ul.sf-menu > li {
	float: none;
}
.aux-menu ul.sf-menu > li:hover  ul.non-mega-sub-menu {
	opacity: 1
}
.aux-menu ul.sf-menu ul.non-mega-sub-menu {
	position: relative;
    -webkit-transition: height 0.5s, display 0.5s, opacity 0.5s;
    transition: height 0.5s, display 0.5s, opacity 0.5s;
    overflow: hidden;
    display: block!important;
    opacity: 0
	
}
.aux-menu ul.sf-menu > li > button,
.aux-menu > div {
	text-align: center!important;
}
}
.aux-menu > div > ul {
	display: inline-block;
	text-align: left;
}
.aux-menu ul.sf-menu > li > button {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #ffffff;
    border: none;
    border-radius: 0;
    cursor: text;
    display: block;
    text-transform: none;
    width: 100%;
}
.aux-menu ul ul {
	background: #666d70;
}
.aux-menu .sf-menu ul.sub-menu .menu-btn {
	color: #ffffff;
	/*font-size: 18px*/
}
.aux-menu ul.sf-menu > li.current > button,
.aux-menu ul.sf-menu > li > button:hover,
.aux-menu .sf-menu ul.sub-menu .menu-btn:hover  {
	color: #000000
}

@media (max-width: 768px){

.aux-menu ul.sf-menu > li {

float: none;

}

.aux-menu ul.sf-menu > li:hover ul.non-mega-sub-menu {

opacity: 1

}

.aux-menu ul.sf-menu ul.non-mega-sub-menu {

position: relative;

-webkit-transition: height 0.5s, display 0.5s, opacity 0.5s;

transition: height 0.5s, display 0.5s, opacity 0.5s;

overflow: hidden;

display: block!important;

opacity: 0

}

.aux-menu ul.sf-menu > li > button,

.aux-menu > div {

text-align: center!important;

}

.aux-menu > div > ul {

display: inline-block;

text-align: left;

}

.aux-menu ul.sf-menu > li > button {

background-color: transparent;

-webkit-box-shadow: none;

box-shadow: none;

color: #ffffff;

border: none;

border-radius: 0;

cursor: text;

display: block;

text-transform: none;

width: 100%;

}

.aux-menu ul ul {

background: #666d70;

}

.aux-menu .sf-menu ul.sub-menu .menu-btn {

color: #ffffff;

/*font-size: 18px*/

}

.aux-menu ul.sf-menu > li.current > button,

.aux-menu ul.sf-menu > li > button:hover,

.aux-menu .sf-menu ul.sub-menu .menu-btn:hover {

color: #000000

}

and the jquery:

jQuery(document).ready(function($){
		$('.aux-menu ul.sf-menu ul.non-mega-sub-menu').each(function(){
			$this = $(this);
			$this.data('height', $this.height());
			
		});
	
	/* Put any theme-specific JS here... */ 
	var aux_adjust = function() {  
		if($window_width < 768 && $('.aux-menu').length > 0){
			
			$('.aux-menu ul.sf-menu ul.non-mega-sub-menu').css('height', 0);	
			$('.aux-menu .level-1').click(function(){
				$height = $(this).find('.non-mega-sub-menu').data('height');
				$(this).find('.non-mega-sub-menu').css({'height':$height + 'px', 'opacity': 1});
				$(this).siblings().find('.non-mega-sub-menu').css({'height':0, 'opacity': 0});
			});
		}
		
	};
	
	
	$(window).load(aux_adjust);
	$(window).resize(aux_adjust);
});

jQuery(document).ready(function($){

$('.aux-menu ul.sf-menu ul.non-mega-sub-menu').each(function(){

$this = $(this);

$this.data('height', $this.height());

});

/* Put any theme-specific JS here... */

var aux_adjust = function() {

if($window_width < 768 && $('.aux-menu').length > 0){

$('.aux-menu ul.sf-menu ul.non-mega-sub-menu').css('height', 0);

$('.aux-menu .level-1').click(function(){

$height = $(this).find('.non-mega-sub-menu').data('height');

$(this).find('.non-mega-sub-menu').css({'height':$height + 'px', 'opacity': 1});

$(this).siblings().find('.non-mega-sub-menu').css({'height':0, 'opacity': 0});

});

}

};

$(window).load(aux_adjust);

$(window).resize(aux_adjust);

});