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> |
