カスタムメニューの折りたたみ表示

カスタムメニューを作成して、サイドバーに表示させています。
サブメニューが多いので、折りたたみにしたいのですが、javascriptもcssのみでも
ulのidかclassをいじる必要がありそうなので導入できませんでした。
折りたたみメニューにする方法はありますでしょうか？
よろしくお願いいたします。

sidebar.phpでは
<?php wp_nav_menu( array( 'menu' => 'side_menu','sort_column' => 'menu_order', 'container_class' => 'widget_nav_menu' ) ); ?>
で読み込んでいます。

表示されるメニューのソースは以下のようになります。

<div class="widget_nav_menu"><ul id="menu-side_menu" class="menu"><li id="menu-item-44" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-44"><a href="http://●●.jp/">ホーム</a></li>
<li id="menu-item-55" class="menu-item menu-item-type-taxonomy menu-item-55"><a href="http://●●.jp/category/◆◆/">◆◆</a>
<ul class="sub-menu">

	<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-71"><a href="http://●●.jp/◆◆/1/">◆◆1</a></li>
	<li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-56"><a href="http://●●.jp/◆◆/2/">◆◆2</a></li>
	<li id="menu-item-72" class="menu-item menu-item-type-custom menu-item-72"><a href="http://●●.jp/◆◆/3/">◆◆3</a></li>
	<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-73"><a href="http://●●.jp/◆◆/4/">◆◆4</a></li>
</ul>
</li>
<li id="menu-item-133" class="menu-item menu-item-type-taxonomy menu-item-133"><a href="http://●●.jp/category/◇◇/">◇◇</a>
<ul class="sub-menu">

	<li id="menu-item-134" class="menu-item menu-item-type-custom menu-item-134"><a href="http://●●.jp/◇◇/1/">◇◇1</a></li>
	<li id="menu-item-135" class="menu-item menu-item-type-custom menu-item-135"><a href="http://●●.jp/◇◇/2/">◇◇2</a></li>
	<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-136"><a href="http://●●.jp/◇◇/3/">◇◇3</a></li>
	<li id="menu-item-137" class="menu-item menu-item-type-custom menu-item-137"><a href="http://●●.jp/◇◇/4/">◇◇4</a></li>
	<li id="menu-item-138" class="menu-item menu-item-type-custom menu-item-138"><a href="http://●●.jp/◇◇/5/">◇◇5</a></li>
	<li id="menu-item-139" class="menu-item menu-item-type-custom menu-item-139"><a href="http://●●.jp/◇◇/6/">◇◇6</a></li>

	<li id="menu-item-140" class="menu-item menu-item-type-custom menu-item-140"><a href="http://●●.jp/◇◇/7/">◇◇7</a></li>
</ul>
</li>
<li id="menu-item-184" class="menu-item menu-item-type-post_type menu-item-184"><a href="http://●●.jp/△△/">△△</a></li>
<li id="menu-item-186" class="menu-item menu-item-type-custom menu-item-186"><a href="http://●●.jp/▲▲/">▲▲</a>
<ul class="sub-menu">
	<li id="menu-item-185" class="menu-item menu-item-type-custom menu-item-185"><a href="http://●●.jp/▲▲/1/">▲▲1</a></li>
	<li id="menu-item-187" class="menu-item menu-item-type-custom menu-item-187"><a href="http://●●.jp/▲▲/2/">▲▲2</a></li>
</ul>

</li>
<li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-183"><a href="http://●●.jp/★★/">★★</a></li>
<li id="menu-item-182" class="menu-item menu-item-type-post_type menu-item-182"><a href="http://●●.jp/☆☆/">☆☆</a></li>
<li id="menu-item-181" class="menu-item menu-item-type-post_type menu-item-181"><a href="http://●●.jp/■■/">■■</a></li>
</ul></div>