Edit in JSFiddle

$(function(){
	$("dl.subList").hide().children("dd").hide();
	
	$("ul#accordionBox h3").click(function () {
		funcClickEvent($(this), $("dl.subList"), $("ul#accordionBox h3"));					  
	});
	
	$("dl.subList dt").click(function () {
		funcClickEvent($(this), $("dl.subList dd"), $("dl.subList dt"));	
	});
	
	function funcClickEvent(dt, dd, h3){
		$(dt).toggleClass("subOpened");
		$(h3).toggleClass("mainOpened");
		$(h3).not($(dt)).removeClass("subOpened").removeClass("mainOpened");
		$(dt).next(dd).slideToggle('normal');
		$(dd).not(dt.next(dd)).hide();
		$("html, body").animate({ scrollTop: p }, 'fast');
			return false;    
		}
});

    
    

<ul id="accordionBox">
    <li class="mainTrigger"><h3>メイントリガー1</h3>
        <dl class="subList">
            <dt class="subTrigger">サブトリガー1-1</dt>
            <dd><p>サブトリガー1-1コンテンツ</p></dd>
            <dt class="subTrigger">サブトリガー1-2</dt>
            <dd><p>サブトリガー1-2コンテンツ</p></dd>
            <dt class="subTrigger">サブトリガー1-3</dt>
            <dd><p>サブトリガー1-3コンテンツ</p></dd>
        </dl>
    </li>
    <li class="mainTrigger"><h3>メイントリガー2</h3>
        <dl class="subList">
            <dt class="subTrigger">サブトリガー2-1</dt>
            <dd><p>サブトリガー2-1コンテンツ</p></dd>
            <dt class="subTrigger">サブトリガー2-2</dt>
            <dd><p>サブトリガー2-2コンテンツ</p></dd>
            <dt class="subTrigger">サブトリガー2-3</dt>
            <dd><p>サブトリガー2-3コンテンツ</p></dd>
        </dl>
    </li>
    <li class="mainTrigger"><h3>メイントリガー3</h3>
        <dl class="subList">
            <dt class="subTrigger">サブトリガー3-1</dt>
            <dd><p>サブトリガー3-1コンテンツ</p></dd>
            <dt class="subTrigger">サブトリガー3-2</dt>
            <dd><p>サブトリガー3-2コンテンツ</p></dd>
            <dt class="subTrigger">サブトリガー3-3</dt>
            <dd><p>サブトリガー3-3コンテンツ</p></dd>
        </dl>
    </li>
</ul>

* {
    margin: 0;
    padding: 0 ;
}
ul#accordionBox {
    width: 320px;
    text-align: center;  
}
ul#accordionBox li{
    background: #999;
    list-style-type: none;
}
h3 {
    height: 50px;
    line-height: 50px;
    border: #000 1px solid;
    background: #999;
}

dt.subTrigger {
    height: 40px;
    line-height: 40px;
    border: #000 1px solid;
    background: #eee;
}
dl.subList dd{
    padding: 10px;
    border: #000 1px solid;
    background: #FFEEEE;
    height: 500px;
}
dl.subList dt {
	position:relative;
}

h3.mainOpened {
	background:#3366FF;
}
dl.subList dt.subOpened {
	background:#0066FF;
}