アコーディオンメニューの作り方　プログラミング学習。社内論争からの解放

アコーディオンメニューを作る場合、タブを選ぶと、

①選んだタブがスライドダウンしてコンテンツが細かく表示される。

②選ばなかったタブは、スライドアップしてコンテンツが非表示になる。

というループが成り立ちます。この内容をコードにします。

if (!contet.is(':visible')){
  $('.accordion-content:visible').slideUp();
  
  content.slideDown();
}

contentは、定義は略しますが、クリックしたタブのコンテンツを示す変数です。

タブはクリックするたび、スライドダウン、アップを繰り返すため、どこかのタブのコンテンツは、表示された状態になっているはずです。

従って、変数contentで示した、クリックしたタブという前提に囚われず、まずコンテンツが表示されたタブを$('.accordion-conten:visible')というセレクタで指定し、スライドアップでコンテンツを閉じています。

そして、クリックしたタブのコンテンツは、スライドダウンで表示させています。

以上が、クリックしたタブのコンテンツは表示され、一方で元々表示されていたタブのコンテンツは非表示になる一連の操作です。

時間の使い方について、

会社では社内の決まりごとから、論争を発生させ、何時間も業務時間が奪われていることもあります。

一人から、数人の群衆単位に派生し慌ただしさを目にすることも珍しくないのではないでしょうか。

新しいことを始めることは脳にもいいようです。

何かと緊張感の高い業務時間とは隔てて、自由時間をリラックスし、楽しむことも重要かもしれません。