開閉パネルを最初から開いた状態にする
Result
jQuery
$(document).ready(function(){
//開いた状態にする
$(".toggle_faq").show();
//h3にclass="active"を加えてからクリックイベント
$("h3.switch").addClass("active").click(function(){
//class付加やスライドをtoggleさせる
$(this).toggleClass("active").next().slideToggle("normal");
return false;
});
});
css
h3.switch {
font-size: 22px ;
padding:3px 0 3px 22px ;
border-left: 3px solid #e91b1b;
margin-bottom: 2px ;
color: #282828 ;
cursor:pointer;
}
h3.active {
color: red;
}
.toggle_faq {
overflow: hidden;
padding: 5px 10px;
}
html
<h3 class="switch">Panel 01</h3><div class="toggle_faq">Panel 01 now open</div>
<h3 class="switch">Panel 02</h3><div class="toggle_faq">Panel 02 now open</div>
<h3 class="switch">Panel 03</h3><div class="toggle_faq">Panel 03 now open</div>
<h3 class="switch">Panel 04</h3><div class="toggle_faq">Panel 04 now open</div>