ホームページの「よくある質問」などでよく使うアコーディオン。 カスタマイズしやすいように最低限のコードに絞って残します。 CSSのみで作る方法などを見かけますが、 なるべく余計なコードを書きたくないのでjQueryとのセットがおすすめ。 今回は2パターン作りますが、クリックアイコンのデザインが違うだけで開閉の仕組みはほぼ同じです。 1. プラスマイナスアイコンのアコーディオン 2. 矢印アイコンのアコーディオン プラスマイナスアイコンのアコーディオン プラスアイコンをクリックすると、隠れていた内容が表示され、マイナスアイコンに変わるアコーディオンです。 See the Pen rNjQePY by kei (@momoi) on CodePen. 重要部分のみ抜粋。 <ul class="ac"> <li> <div class="ac-label"> <p>Label</p> <div