Collapsible Categories

Trying to make a collapsible list of nested topics

HTML

<body>
<ul class="category-column">
  <li class="cat-item cat-item-3"><a href="https://www.google.com">I. Heading Number One</a>
    <ul class="children">
	<li class="cat-item cat-item-481"><a href="#">Subheading A</a></li>
	<li class="cat-item cat-item-483"><a href="https://www.google.com">Subheading B</a>
	   <ul class="children">
		<li class="cat-item cat-item-587">Child of subheading B</li>
		<li class="cat-item cat-item-588">Second child of subheading B</li>
	   </ul>
	</li>
    </ul>
  </li>

  <li class="cat-item cat-item-4">II.Heading Number Two
    <ul class="children">
	<li class="cat-item cat-item-200"><a href="#">Subheading C</a></li>
	<li class="cat-item cat-item-201"><a href="#">Subheading D</a>
	   <ul class="children">
		<li class="cat-item cat-item-300">Child of subheading D</li>
		<li class="cat-item cat-item-301">Second Child of subheading D</li>
	   </ul>
	</li>
    </ul>
  </li>
  
    <li class="cat-item cat-item-4">III.Heading Number Three
    <ul class="children">
	<li class="cat-item cat-item-200"><a href="#">Subheading E</a></li>
	<li class="cat-item cat-item-201"><a href="#">Subheading F</a>
	   <ul class="children">
		<li class="cat-item cat-item-300">Child of subheading F</li>
		<li class="cat-item cat-item-301">Second Child of subheading F</li>
	   </ul>
	</li>
    </ul>
  </li>
</ul>



</body>

CSS

li.open * {
  display:block !important;
}

.children {
display:none;
}

li.open>span.plus {
  display:none !important;
}

li.open>ul.children>li.hasSubmenu>span.plus {
  display:none !important;
}

.all {
  font-weight:bold;
  cursor:pointer;
}

.notActive {
  color:red;
}

JavaScript

$(document).ready(function($) {

$(".children").closest("li").addClass("hasSubmenu");

 if(
     $("li").hasClass("hasSubmenu")) {
	$("li.hasSubmenu").append("<span class='plus'>&nbsp;&nbsp;&#43;</span>");
     }

 $(".cat-item").click(function(e) {
 	$(this).toggleClass("open");
  e.stopPropagation();
 });
});



$("ul.category-column").after("<p class='all'>Expand All</p>");
$("p.all").click(function(f) {
	$(".cat-item").addClass("open");
});

//if( $("li.hasSubmenu").not(".open") ) {
//$(".hasSubmenu").children("a").click(function(event) {
//	event.preventDefault();
//});
//}

//$(document).ready(function($) {
//  $("li.hasSubmenu").addClass("notActive");

 // $("li.hasSubmenu").click(function(m) {
//	if ( $("li.hasSubmenu").hasClass("open")) {
//	$(this).toggleClass("notActive");
//	$(this).find(".hasSubmenu").toggleClass("notActive");
//	m.stopPropagation();
//	}
//});
//});

$(document).ready(function($) {
	var top = $("ul.category-column li.hasSubmenu").first();
  top.addClass("topLevel notActive");
  top.siblings("li").addClass("topLevel notActive");
  
  $("li.topLevel").click(function(n) {
  	$(this).toggleClass("notActive");
  });
});

$(document).ready(function($) {
	$("li.notActive a").on('click', function(disabled){
  disabled.preventDefault();
  });
  $("li.open a").on('click', function(enabled){
  	return true;
  });
});