折りたたみが最も簡単 details と summary をjQueryに置き換えるメモ

Page 2: 三角クリックで開閉、summaryの中にリンクを入れたい

折りたたみの基本の形はこうでした。

タイトル部分クリックで隣接コンテナが開きます。

この折りたたみ、ただ折りたたむためのボタンとしてのみ利用するならこの状態で十分ですが、それ以外に「こうなればいいのにな」という希望が一つ出てきます。▼►部分で開閉を司り、その直後のテキストを自由に扱いたい（例えばリンクテキストを置くなど）という希望です。

どういう使い方を想定しているかというと、このような使い方という例です。

クリックで開閉するメニューですね。三角印をクリックしたら折りたたみ、でもその中のテキストはリンクになってます。

この形のjs-summary内に<a>タグを置いてもリンクにならないんです。無視され、折りたたみが優先されます。そこで、仕組みをもう一個追加しました。

箱三つのスクリプト

基本の形は

で、summaryをクリックしたら隣接するコンテナdivが表示されるスクリプトでした。

これを幼稚園児並みの頭脳を駆使して、こうしました。

箱を三つにしました。

箱二つの js-summary の役割を、箱三つの三角印に割り当てます。隣接する summary をすっ飛ばし、そのまた隣のコンテナdivを表示・非表示させます。summary は仕組みの中で無視されますから、ここに何を書いてもOKです。

箱二つでは js-summary とクラスを付けました。箱三つではスクリプトを新たに作りますので、三角印に js-click という別のてきとうなクラス名をつけました。

スクリプトでは「 js-click がクリックされたら、隣の隣のコンテナを表示非表示トグル」としました。

jQuery('.js-click').each(function(){
	jQuery(this).on('click',function(){
		jQuery(this).toggleClass('open');
		jQuery(this).next().next().slideToggle(300);
		return false;
	});
});

cssでは、.js-click と隣のdiv を inline-block にして繋がって見えるようにしています。判りやすく枠付きで表示するとこんな感じです。三角をクリックしてみてください。

 

ものすごく安直な解決策ですがやりたいことは実現できました。 こうして js-summary とか js-click とかクラス名を付けた最初のdivをクリックすると、隣のdivが表示・非表示されるスクリプトと、隣の隣のdivが表示・非表示されるスクリプトの二つを作りました。

このスクリプトは、ブログ投稿内というより、テンプレートでメニュー的なリストを作る際に利用することが想定されると思います。

ふたつをまとめるとこういうスクリプトです。これを js 拡張子で保存してheaderかfooterから読み込みます。

//折りたたみ js-summary + div
// js-summary と隣接するboxを開閉する
jQuery('.js-summary').each(function(){
 jQuery(this).on('click',function(){
  jQuery(this).toggleClass('open');
  jQuery(this).next().slideToggle(300);
  return false;
  });
 });

// 折りたたみ js-click + div + div
// js-click の次の次のboxを開閉する
jQuery('.js-click').each(function(){
 jQuery(this).on('click',function(){
  jQuery(this).toggleClass('open');
  jQuery(this).next().next().slideToggle(300);
  return false;
  });
 });

これでまず大抵のやりたいことが実現できました。めでたしめでたし。

でもまだこの記事は終わりません。もうひとつ、さらにオマケで似たようなスクリプトを追加したのです。

それはこうです。

ターゲットをクリックすると、その親に .open を追加し、隣を表示・非表示トグルさせます。

これは何のことでしょう。何に使うのでしょう。それは次のページで。