"Table of Contents" web part - How to have expand/collapse buttons? (I can use only CSS/JavaScript/JQuery)

Question

Hi there,
I have a Table of Contents web part which is great. Is there a way so it shows only top level sites and then one can expand or collapse any top level site to see/hide the subsites?
As of now it shows
HR Parent site
- HR sub site 1
- HR sub site 2
IT Parent site
- IT sub site 1
- IT sub site 2
What I want is 
+ HR Parent site
+ IT Parent site
So one can expand or collapse on demand.
Any relevant JS/CSS/JQuery code?
Thank you so much.

Answer 1

Hi,
According to your post, my understanding is that you want to expand or collapse the level site for the table of contents web part.
I have made a simple code demo below to achieve this scenario, you can refer to it.
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var iconCollapse = "/_layouts/images/collapse.gif";
var iconExpand = "/_layouts/images/expand.gif";
$("div[id='WebPartWPQ2'] li ul").hide();
//ugly way
var $t = $("#WebPartWPQ2 div").children("ul").children("li").children("div");
$t.each(function(){
//console.log($(this).html());
$(this).attr("style", "float: right; margin-right: 297px; line-height: 8px;");
$(this).css("display","inline");
$("<a src=" + iconExpand + "></img>").insertBefore($(this));
$("a[class='min']").click(function()
var img = $(this).children();
//Traverse the DOM to find the child UL node
var subList = $(this).siblings().children('ul');
//Check the visibility of the item and set the image
var Visibility = subList.is(":visible")?img.attr('src',iconExpand):img.attr('src',iconCollapse);
//Toggle the UL
subList.slideToggle();
</script>
Note: Yous should change the Web part ID and the css style to fit your environment.
Thanks & Regards,
Jason
Jason Guo
TechNet Community Support