I'm using jQuery for multiple toggling menus on my small site. However, basically change it's initial loading from .show to .hide it won't work.

My js file is:

jQuery(document).ready(function($) {
$('div ul.menu').hide();
$('h2.trigger').click(function() {
$(this).toggleClass("active").next().slideToggle('slow');
return false;
});
});

And my html for my multiple menus is much like so:

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>

Any ideas why this can not work?

Simply eliminate your extra div tag. Your next() is picking that rather than the ul.menu you are attempting to focus on. Like so:

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>

You must also customize the following line

$('div ul.menu').hide();

to omit the div

$('ul.menu').hide();

Note: why this seems to utilize .show() is your div is proven automatically so the truth that the .show() has been known as around the wrong item goes undetected.