It's a mix of jQuery Accordion plus Categories from WordPress (both tweaked to suit need). The inspiration of this comes from - http://www.truelocal.com.au/business-type

custom-accordion-cats.php

<?php

/**
The inspiration of this comes from - http://www.truelocal.com.au/business-type

Visit the link to see what we are aiming at.

It's a mix of jQuery Accordion plus Categories from WordPress (both tweaked to suit need).

The 'jquery-ui.css' mentioned below can be taken from jQuery's site.

This is not final code as I would like to have a shortcode of full code, plus the css can be trimmed down as well.

PS. jQuery and php ninja's can also help to reduce some code weight here.

Will be updating the code with icon (arrows on accordian header and final css tweaks) in coming days.

**/

/*
Following goes in functions.php
*/

//* Accordion Styles Scripts
wp_register_style( 'jquery-ui-style', get_bloginfo( 'stylesheet_directory' ) . '/jquery-ui.css' );

function acc_test_scripts() {
	if(is_page_template('acc-test.php')) { // Optional Conditional
		wp_enqueue_style( 'jquery-ui-style' );
		wp_enqueue_script( 'accordion-script', get_stylesheet_directory_uri().'/js/accordion-js.js', array('jquery-ui-core', 'jquery-ui-accordion', 'jquery-ui-tabs') ); 
	}
}
add_action( 'wp_enqueue_scripts', 'acc_test_scripts' );

/*
Some additional css which goes in your theme's stylesheet
*/
?>

<style>
#accordion {
    border: 1px solid #FF0000;
    width: 100%;
}

.col {
    border: 1px solid #0000FF;
    float: left;
    overflow: hidden;
    width: 33%;
}
</style>

<?php
/*
Following goes in a file 'accordion-js.js' in js floder of your child theme's folder
Child Theme Folder -> JS Folder -> accordion-js.js
*/
?>

<script>

jQuery(function() {
	jQuery( "#accordion" ).accordion({
		heightStyle: "content",
		active: false,
  		collapsible: true,
	});
	
	jQuery('div > h3').each(function(){
		jQuery(this).next('div').andSelf().wrapAll('<div class="test"/>');
	});
	
	jQuery('div.ui-accordion > .test').each(function(i) {
    		if( i % 8 == 0 ) {
        		jQuery(this).nextAll().andSelf().slice(0,8).wrapAll('<div class="col"></div>');
    		}
	});
	
	jQuery( "#toggle" ).button().toggle(function() {
            jQuery( "#accordion" ).accordion( "option", false );
        }, function() {
            jQuery( "#accordion" ).accordion( "option" );
        });
});

</script>

<?php

/*
Following goes in the template (or place) where you want to show those categories
*/


/*
Template Name: Accordion Test Page
*/

add_action('genesis_meta','custom_full_layout');

function custom_full_layout() {
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
}

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'vg_custom_loop' );

function vg_custom_loop() {
$noparent = array();
$childs = array();
$taxonomy = "category";
$i=0;

$args = array(
	'hide_empty' => 0,
	);
$cats = get_categories($args);

// Gets all parent and single categories
foreach ((array)$cats as $cat) {
	$catparent = $cat->category_parent;
	if($catparent == 0) {
		$noparent[$i]['name'] = $cat->name;
		$noparent[$i]['id'] = $cat->term_id;
		$i++;
	}
}

echo "<div id='accordion'>";
	// Make display of parent category (without count) and their children categories (with count)
	foreach ((array)$noparent as $nop) {
			$childs = get_term_children( $nop['id'], $taxonomy );
			if( !empty( $childs ) ) {
					echo "<h3>" . $nop['name'] . "</h3>";
					foreach ((array)$childs as $child) {
						$argss = array(
						'style'              => 'list',
						'show_count'         => 1,
						'hide_empty'         => 0,
						'child_of'           => $nop['id'],
						'title_li'           => '',
						'taxonomy'           => 'category',
						);
						echo "<div>";
							echo "<p>";
								wp_list_categories( $argss );
							echo "</p>";
						echo "</div>";
					break;
				}
			} else {
					echo "<h3>" . $nop['name'] . "</h3>";
			}
	}
echo "</div>";
}

genesis();