【shutto小技 Topics】アコーディオンタップ時の背景色の指定方法

このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。

平素よりshuttoをご利用いただきありがとうございます。
今回は、shutto変換のちょっとした小技をご紹介いたします。

アコーディオンのヘッダをタップした瞬間の背景色を指定したい…と思ったことはありませんか？
そんな時は……、タップした瞬間に .shutto-cative というclassがヘッダにつきますので、
CSS入力で　!important をつけて指定すると変更する事ができます！

■CSS例

.shutto-component-accordion-header.shutto-active {
background: -moz-linear-gradient(top, #d0d0d0, #dfdfdf) repeat scroll 0 0 #d0d0d0 !important;
background: -o-linear-gradient(top, #d0d0d0, #dfdfdf) repeat scroll 0 0 #d0d0d0 !important;
background: -webkit-gradient(linear, left top , left bottom, from(#d0d0d0), to(#dfdfdf)) repeat scroll 0 0 #d0d0d0 !important;
}

■使用例
http://shutto.com/view/QHPFx6S

※「新着情報」のアコーディオンで使用しております。

以上、小技でした。
今後もその他小技をblogにて公開していく予定です。
これからもshuttoを宜しくお願いいたします。