Result

jQuery

//最初のを表示して他は隠す
$('.ac').next().hide(0).end().eq(0).addClass('active').next().show(0);
//クリックイベント発火
$('.ac').click(function() {
    //classの処理
    $('.ac').removeClass('active').next().hide(0);
    $(this).addClass('active').next().show(0);
});​

css

body{width: 450px ;}
.ac {
    padding: 4px 10px;
    margin: 4px 10px;
    background: #333;
    color:#fff;
    cursor:pointer;
}
div{padding:0 15px;}

html

<h3 class="ac">Open 01</h3>
<div><p>Content</p></div>


<h3 class="ac">Open 02</h3>
<div>ContentContent</div>


<h3 class="ac">Open 03</h3>
<div><ul>
    <li>Content list01</li>
    <li>Content list02</li>
    <li>Content list03</li>
</ul></div>​