【パーツ】アコーディオン【ショートカット用】

1.シンプルなアコーディオン

「質問」をクリックすると開閉

「質問」をクリックで開閉。「答え」をクリックしても閉じない。

See the Pen アコーディオン by kbyt (@kbo58) on CodePen.

「質問」「答え」どちらでも開閉

「質問」と「答え」どちらをクリックしても閉じる。

See the Pen Untitled by kbyt (@kbo58) on CodePen.

1つずつ開くタイプ

答えを開いたまま次の質問をクリックすると他の答えは閉じる。

See the Pen Untitled by kbyt (@kbo58) on CodePen.

2.カーソルの文字が変わるタイプ

ドロップダウンすると右側のカーソルも変化する

See the Pen シンプルなアコーディオン１ by kbyt (@kbo58) on CodePen.

変更する際はHTMLのclass=”arrow“のところとJSのtextの文字を任意のものに変えればOK

<div class="qaa-wrapper">
  <ul>
    <li class="qaa">
      <p class="question">お茶と称して…<span class="arrow">⬇︎</span></p> <!-- ここの矢印を変える-->
      <p class="answer">有罪です</p>
    </li>

<!- -略 -->

$('.qaa').click(function(){
  var answer = $(this).find('.answer');
  if(answer.hasClass('open')){
    answer.slideUp().removeClass('open');
    $(this).find('.arrow').text('⬇︎'); //ここを変える
  }
  else{
    answer.slideDown().addClass('open');
    $(this).find('.arrow').text('⬆︎'); //ここを変える
  }
});

FontAwesomeを使ったアコーディオン

開閉ボタンにFontAwesomeを使ったもの。上と同じようにHTMLとJSのところのFontAwesomeを変えれば代用可能

See the Pen fontawesomeが入ったアコーディオン by kbyt (@kbo58) on CodePen.

開閉ボタンにアニメーションがついたアコーディオン

開閉が動くタイプのもの

See the Pen スタンダードなアコーディオン３ by kbyt (@kbo58) on CodePen.

QやAの文字は::first-letterで頭の文字を大きくしているだけ。

開閉が動くタイプのもの(１つずつ開閉)

See the Pen Untitled by kbyt (@kbo58) on CodePen.

前に開閉ボタンがついたもの

See the Pen スタンダードなアコーディオン２ by kbyt (@kbo58) on CodePen.

3.縦に情報量のあるアコーディオン

See the Pen Untitled by kbyt (@kbo58) on CodePen.

横並びのアコーディオン

レスポンシブで縦になる。

See the Pen Untitled by kbyt (@kbo58) on CodePen.

アコーディオン(ホバー)

メニューにホバーで開くもの

See the Pen ホバーメニュー by kbyt (@kbo58) on CodePen.