if it does't challenge you, it can't change you

RubyのWebエンジニアやってます。主にRuby on Railsのことで勉強になったこと書いていきます。

アコーディオン機能の三角がくるっと回るやつの設定方法

html

<dt><p><img src="./images/triangle.png" class="arrow">&emsp;学歴</p></dt>
<dd><p>長岡技術科学大学 環境工学課程卒業</p></dd>
<dt><p><img src="./images/triangle.png" class="arrow">&emsp;実績</p></dt>
<dd><p>オーストラリアワーキングホリデー<br>6,000kmヒッチハイク旅制覇</p></dd>
<dt><p><img src="./images/triangle.png" class="arrow">&emsp;SNS</p></dt>

1. クリックファンクションを設定

2. クリックした要素の三角の画像を取り出す$('img', this)

3. アコーディオンを開くと同時に2で取り出した要素にcssのスタイルを設定.toggleClass('dropdown_toggle')

$(function(){
  $('.side_menu dd').hide();
  $('.side_menu dt').click(function(e){
    // toggleClassは開くときにクラスを当てる
    // thisの子孫要素である'img'を取り出す
    $('img', this).toggleClass('dropdown_toggle');
    $(this).next('dd').slideToggle()
  });
})

4. 3で設定される、三角を回転させるためのスタイルを設定

.dropdown_toggle {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
}