自分用チートシートです。
※JQuery必須
HTML
<spanclass="icon"></span>これだけ。
CSS
.icon{display:block;position:relative;width:30px;//正方形推奨height:30px;//正方形推奨}.icon:before,.icon:after{content:'';display:block;position:absolute;top:50%;transform:translate(0,-50%);width:100%;height:3px;//線の太さbackground-color:pink;//線の色}.icon:after{transform:translate(0,-50%)rotate(90deg);}.icon.minus:before{opacity:0;}.icon.minus{transform:rotate(90deg);}.icon,.icon:before{transition:all.4s;//トグルする時のアニメーション速度}JQuery
$('.icon').on('click',function(){$(this).toggleClass('minus');});以上です。
スマホで情報量多めのページ作る時けっこう便利です。
大抵はトグル表示するコンテンツと合わせてdivで囲って使うと思うので、toggleClassは親divに対して行った方がいろいろとスマートにいけるかもです。
