Accordion menu closes on page load

I have an accordion menu, that opens when you click a “category” to show the sub-categories. And closes when you click it again, or click a different category. This works fine.

Basic HTML Structure

<ul id="menu-products" class="menu">
<li><a href="#">T120 Designjet</a>
    <ul class="submenu">
        <li><a class="internal" href="http://www.cancadd.ca/cms/product/hp-711-29-ml-cyan-ink-cartridge-cz130a/">HP 711 29-ml Cyan Ink Cartridge (CZ130A)</a> </li>
        <li class="active"><a class="internal" href="http://www.cancadd.ca/cms/product/hp-711-29-ml-magenta-ink-cartridge-cz131a/">HP 71 29-ml Magenta Ink Cartridge (CZ131A)</a> </li>
    </ul>
 </li>
<li><a href="#">T520 Designjet</a>
    <ul class="submenu">
        <li> <a class="internal" href="http://www.cancadd.ca/cms/product/hp-711-29-ml-cyan-ink-cartridge-cz130a/">HP 711 29-ml Cyan Ink Cartridge (CZ130A)</a> </li>
    </ul>
</li>
</ul> 

JS

<script>
$(document).ready(function() { 
$('#sidebar .menu li > a').on('click', function() {
$('#sidebar .menu li .submenu').each(function() { 
    if($(this).is(":visible")) { 
      $(this).slideUp(); 
    }
  }); 
  if($(this).parent('li').children('.submenu').length) {
    if(!$(this).parent('li').children('.submenu').is(":visible")) { 
      $(this).parent('li').children('.submenu').slideToggle();
    }
    return false; 
   }
});
});
</script>

However, when I click on a sub-category item, and go to that page, the menu defaults to closed.

I would like only the menu that has a sub-category item active to be open on page load, but I’m not sure how to modify this code to do that.

Here’s an example page on my website: http://www.cancadd.ca/cms/product/hp-711-29-ml-yellow-ink-cartridge-cz132a/