11 January

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

27 June

アコーディオン開閉パネル　fontawesomeでアイコンも変える

js
//アコーディオンパネル
$('.button i').attr('class', 'fa-plus-square');
$(function(){
    $('.button')
    .on('click', function(){
        $('#panel').slideToggle(400);
        $('.button i').toggleClass('fa-minus-square');
        return false;
    });

});

html
<a class="button">　ぼたん　<i class="fa fa-plus-square fa-fw"></i></a>

<ul id="panel">
<li></li>
<li></li>
<li></li></ul>

css
#panel{
display:none;
}

複数のアコーディオンパネルをそれぞれのボタンで開閉する場合はこうする
$(this).next('#panel').slideToggle(400);