プログラミング学習記録

【jQuery】アイコン変化あり:複数の項目を1つずつ表示する方法(click,toggle)

更新日:

スポンサーリンク

【jQuery】アイコン変化あり:複数の項目を1つずつ表示する方法(click,toggle)

✅ 表示結果(コードもあり)

See the Pen EzXOzX by mochio4552 (@mochio4552) on CodePen.0

✅ ソースコード(コピペ用)

  • 部品としてコピペするのに便利です
  • 全てのコードは、上の表示結果を参照してください
  • Bootstrap,fontawesomeを使用しています
  • Bootstrapはテキストを左寄せしているだけです
  • fontawesomeのアイコンは、アイコン変化の練習用です
  • また、デザインの参考にもなるでしょう
  • jQueryの設定ファイルは各自でご用意ください
  • 別でCSSフォルダ、jsフォルダを作成する必要があります
  • ×slidetoggle 〇slideToggle

・HTML

<div class="page-box-title">
 <div class="page-box-title-text"><p>タイトル</p></div>
 <i class="fas fa-angle-down fa-lg"></i>
 <i class="fas fa-angle-up fa-lg"></i>
</div>
 <div class="page-box-text"><p>テキスト</p></div>
</div>

・CSS

.page-box{
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 30px;
}

.page-box-title{
  display: flex;
  font-size: 20px;
  font-weight: bold;
}

.page-box-title .fas{
  margin-left: auto;
  margin-right: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

.far{
  margin: auto 5px;
  color: blue;
}

.page-box-title{
  padding: 10px;
  background-color: #fff;
  color: #000000;
  border: solid 1px #e5e5e5;
}

.page-box-text{
  padding: 20px;
  font-weight: bold;
  font-size: 16px;
  display: none;
}

・jQuery

$(function(){
      $(".page-box-title .fa-angle-up").hide();
  $(".page-box-title").click(function(){
      $(this).next().slideToggle(200);
      $(this).find(".fa-angle-down").toggle();
      $(this).find(".fa-angle-up").toggle();
  });
});

-プログラミング学習記録

Copyright© katoooblog , 2020 All Rights Reserved Powered by STINGER.