Result
http://jsfiddle.net/kachibito/JUAwp/12/embedded/result,js,css,html
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>