Accordion Nav (Walker Nav or better solution) WordPress

Daryl Baker comments:

How would I do this call into the template file using this nav ? (Sorry I didn't want to post to much to seem overwhelming)

This the accordion I would like to use to replace the tabs but still work with the ID's, I think it will be possible to still add in the rel="the_ID();" correct for the menu items ?

Thanks so much!



<ul class="accordion">
<li>
<a href="javascript:void(0)" class="js-accordion-trigger">Accordion Item</a>
<ul class="submenu">
<li>
<a href="javascript:void(0)">Sub Item 1</a>
</li>
<li>
<a href="javascript:void(0)">Sub Item 2</a>
</li>
</ul>
</li>

</ul>


Rempty comments:

Sorry for the delay
Using the code from http://cssmenumaker.com/blog/wordpress-accordion-menu-tutorial
Editing the nav walker to include the rel

class CSS_Menu_Maker_Walker extends Walker {

var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul>\n";
}

function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;

/* Add active class */
if(in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}

/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

$output .= $indent . '<li' . $id . $value . $class_names .'>';

$thepostid=get_post_meta( $item->ID, '_menu_item_object_id', true );

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $thepostid ) ? ' rel="' . esc_attr( $thepostid ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}

I just added the $thepostid=get_post_meta( $item->ID, '_menu_item_object_id', true ); to get the postid
And replaced the rel to $attributes .= ! empty( $thepostid ) ? ' rel="' . esc_attr( $thepostid ) .'"' : '';

Daryl Baker comments:

Hey guys sorry it seemed the website was down for a bit again,

So just some small issues I cannot figured out

Currently here is the output, (after render)

<a rel="695" href="http://ne-oud.dev:8888/races/burkfalls/"><span>Burkfalls</span></a>


The problem is I need this to just change the tabs not goto a new page,

Here is the code previous for the tabs I used, (before render)

<a href="javascript:void(0)" class="js-vertical-tab vertical-tab page-item" rel="<?php the_ID();?>">


My question is, how can i get the classes in that & the href to be java.... etc , the_ID is working perfect now I tried to edit it directly in chrome dev tools but it still would not switch the tabs , is this because its dynamic and wont work that way unless its rendered out or is this just not going to work for me ? Does it have to be inside a loop to work etc like my previous tabs ?

Daryl Baker comments:

After more research it seem's like the js-vertical-tab class is what triggers it all to work the other ones are not relevant .

Daryl Baker comments:

Hey thanks for offering your input I really do appreciate it, Currently the Tabs are looped, my client was hoping to be able to "build" the menu in the backend so he can have full control over it,


For example he wants this

Accordion Menu
--------------
Old Birds (Parent)
---> Child Item (Races Each Week)
---> Child Item (Races Each Week)
---------------
Young Birds (Parent)
----> Child Item (Races )

He would be able to add and remove items on the fly compared to the tabs that just auto generate all the post titles in "My Races" custom post area.

Hope this helps and thanks for the loop comment, the good part is after I do add this in I'll be back to one loop and will use your suggestions!

Thank you
D

Reigel Gallarde comments:

talking about accordion, are the parents the menu and the child the content?

Daryl Baker comments:

Let me get you a screen shot of how it should look will explain things a bit easier :)

Reigel Gallarde comments:

also, are you trying to make use of Appearance > Menus ? just confirming...

Daryl Baker comments:

Here is a screen cap, I put in the static accordion menu for now to show how I would like it to work

Hope this helps!
D