Displaying categories in sidebar using javascript, jquery & php

I recently created a theme and then wanted to add a routine to show my Post categories in a vertical hierarchical  menu.
This routine lists the top level category with a count of child posts.
On clicking a category name, the child posts are revealed.

I tried to use a plugin ‘collapse categories’ which should have worked, but the plugin doesn’t work with Bootstrap.css or jquery.1.10+

The routine uses a combination of PHP, Javascript & jQuery.
Work with the routine on the sidebar of the Post of this blog.
The css styles are listed at the bottom of the page

<?php
// set the arguments for the query
$args = array(

‘post_type’ => ‘post’,
‘orderby’ => ‘name’,
‘order’ => ‘ASC’,
‘hide_empty’ => 1,
‘depth’ => 1,
‘posts_per_page’ => -1
);

$categories = get_categories( $args );

// echo each category and create ul (list) for their child posts
echo “<div class=’pcl_category’>”;
foreach ( $categories as $category ) {
echo “<h2 onclick=\”unhide(‘”.$category->slug.”‘);\”>”;       //
echo $category->name .” (“.$category->category_count.”)”;
echo “</h2>”;

$args[‘category’] = $category->term_id;
$posts = get_posts($args); ?>

<div class=”post_cat_list”>
<ul id=”<?php echo “pcl_”.$category->slug;?>”>
<?php foreach($posts as $post) { ?>
<li><a href=”<?php the_permalink()?>”><?php the_title(); ?></a></li>
<?php } ?>
</ul>
</div>
<?php }
echo “</div>”;

// reset query after you’re finished with it
wp_reset_query();

?>

// use standard javascript to work with cookies.
// cookies will determine which category list is open

<script>
writeCookie = function(cname, cvalue, days) {
var dt, expires;
dt = new Date();
dt.setTime(dt.getTime()+(days*24*60*60*1000));
expires = “; expires=”+dt.toGMTString();
document.cookie = cname+”=”+cvalue+expires+’; domain=bluelily.com.au’;
}

function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

// use jquery to hide/reveal category lists using jQuery routines

$(function() {
$(‘[id^=”pcl_”]’).hide();
$menuID = readCookie(‘pcl_category’);
$(“#pcl_”+$menuID).show();
});

function unhide($menuID){
$(‘[id^=”pcl_”]’).hide();
$(“#pcl_”+$menuID).delay(50).fadeIn(500);
writeCookie(‘pcl_category’,$menuID,30);
};
</script>

<style>
.pcl_category{text-align: left}
.pcl_category h2{font-size:18px; font-weight: 500; margin-left:20px}
.pcl_category h2:hover{cursor:pointer; text-decoration: underline}
.post_cat_list ul{text-align: left; margin-left:-5px}
.post_cat_list li{line-height: 22px; list-style-type: none}
</style>

Adwords (1)

Branding (13)

CMS (3)

CSS (6)

Graphic Design (6)

Javascript (1)

PHP (3)

SEO (5)

tech support (5)

Web Design (10)

Web Development (10)

Wordpress (17)

Wordpress plugins (3)