WordPress - Display categories, duplicate parent item and show as a child if there are children

Question

I'm having issues with customising the Custom Walker.

What i'm trying to do is create an accordion menu where the first parent opens up the child list which also as the parent repeated so it can be clicked on.

Parent 1 - Parent 1 - Child 1 - Child 2 Parent 2 - Parent 2 - Child 1 - Child 2 - Child 3

I've looked around stacked overflow and this is what i got so far.

    <ul>

        <?php

            class Walker_Simple_Example extends Walker_Category {


                // Configure the start of each element
                function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0) {

                    // Set the category name and slug as a variables for later use
                    $cat_name = esc_attr( $category->name );
                    $cat_name = apply_filters( 'list_cats', $cat_name, $category );
                    $cat_slug = esc_attr( $category->slug );

                    $haschildren = '';
                    if($args['has_children']) {
                        $haschildren = ' has-children';
                    }

                    // Configure the output for the top list element and its URL
                    if ( $depth === 0 ) {
                        $link = '<a class="parent-category-dropdown" href="' . esc_url( get_term_link($category) ) . '"' . '>' . $cat_name . '</a>';
                        $indent = str_repeat("\t", $depth);
                        $output .= "\t<li class='parent-category" . $haschildren . " " . $cat_slug . "'>$link\n<div class='category-dropdown'>\n<span class='parent-category-title'><a href='" . esc_url( get_term_link($category) ) . "'>" . $cat_name . "</a></span>\n$indent<ul class='submenu'>\n";
                    }

                    // Configure the output for lower level list elements and their URL's
                    if ( $depth > 0 ) {
                        $link = '<a href="' . esc_url( get_term_link($category) ) . '"' . '>' . $cat_name . '</a>';
                        $output .= "\t<li class='sub-category'>$link\n";
                    }

                }

                // Configure the end of each element
                function end_el(&$output, $page, $depth = 0, $args = array() ) {
                    if ( $depth === 0 ) {
                        $indent = str_repeat("\t", $depth);
                        $output .= "$indent</ul>\n</div>\n";
                    }
                    if ( $depth > 0 ) {
                        $output .= "</li>";
                    }

                }
            }

            wp_list_categories( array(
                'orderby' => 'name',
                'child_of' => 22,
                'title_li' => '',
                'walker' => new Walker_Simple_Example
            ));

        ?>

    </ul>

Firstly, it isn't working for sub sub child and secondly, it's adding the parent-category-title outside the ul wrapper.

If there's a better way of doing this, i'm all ears!

Thanks a lot :)