Tuesday, December 25, 2012

How to list categories with jquery slide down effect in wordpress

Open the wordpress file sidebar.php copy and paste the following code

      
parent ) {
 echo '
  • ' . $cat->name . '
  • '; process_cat_tree( $cat->term_id ); } endforeach; wp_reset_query(); function process_cat_tree( $cat ) { $args = array('category__in' => array( $cat ), 'numberposts' => -1,'orderby'=>'modified'); $cat_posts = get_posts( $args ); if( $cat_posts ) : foreach( $cat_posts as $post ) : echo ''; endforeach; endif; $next = get_categories('hide_empty=0&parent=' . $cat); if( $next ) : foreach( $next as $cat ) : echo '
    • ' . $cat->name . '
    • '; process_cat_tree( $cat->term_id ); endforeach; endif; echo '
    '; } ?>
Next open the header.php in file include the jquery file and add the following code in jQuery
  function jquery_categories_list_animate(clicked_obj){
		 if($(clicked_obj).parent().children('ul').is(':hidden')){
		 
            $(clicked_obj).parent().children('ul').slideDown();
			
        }
        else
        {
			
           $(clicked_obj).parent().children('ul').slideUp();
        }
        $(clicked_obj).toggleClass('expanded');
    }

    $(document).ready(function() {
       
	    
$('li.m1').bind('click', function(){
            jquery_categories_list_animate(this);
			//alert("sdfsdf");
                    return false;
        });

    });


0 comments: