DAY49.実務でよく使うアニメーションの付け方編 アコーディオン

01.slideToggle()で簡単アコーディオン実装

jQuery('.accordion__head').click(function() {
　jQuery(this).next().slideToggle();
　jQuery(this).children('.accordion__icon').toggleClass( 'is-open' );
});

jQuery(this)に対する、next()やchildren()といった
相対的な位置関係もよく使う

.qa-box__q {
　color: #fff ;
　background: $color-main;
　padding: 12px 56px;
　font-weight: 700;
　position: relative;
　
　&::before {
　　content: "Q";
　　position: absolute;
　　top: 12px;
　　left: 20px;
　}
}

content: "Q";
でQの文字を入れることができる