コピペで使える＋－トグルアイコン

自分用チートシートです。
※JQuery必須

HTML

<span class="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: .4s; //トグルする時のアニメーション速度
}

JQuery

$('.icon').on('click', function(){
    $(this).toggleClass('minus');
});

以上です。
スマホで情報量多めのページ作る時けっこう便利です。
大抵はトグル表示するコンテンツと合わせてdivで囲って使うと思うので、toggleClassは親divに対して行った方がいろいろとスマートにいけるかもです。