開閉パネルを最初から開いた状態にする

Ads

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>
タイトルとURLをコピーしました