Essentially, I attempted to display only 10 items by default and hide the rest, which become visible when clicking on the "more category" div at the bottom. This was achieved using jQuery, and now I am looking to add some transition effects to the toggle window that opens up quickly. Any suggestions?
var max = 10;
jQuery('#menu-categories').each(function () {
if (jQuery(this).find('li').length > max) {
jQuery(this).find('li:gt(' + max + ')').hide().end().append('<li class="sub_accordian"><div class="show_more">More Categories</div></li>');
jQuery(this).find('.sub_accordian').click(function (e) {
jQuery(this).siblings(':gt(' + max + ')').toggle();
if (jQuery(this).find('.show_more').length) {
jQuery(this).html('<div class="show_less">Close Menu</div>');
} else {
jQuery(this).html('<div class="show_more">More Categories</div>');
};
});
};
});