こんにちは！
今年も残り1か月ちょっととなりました。

 

toggleの応用編の前に、ちょっと書き留めておきたいことを
書かせていただきます。

 

最近弊社の中でブランディングについてデザイナーが集まって定義等を話すという場が設けられました。
これまで無意識していたものの中にブランディングと名付けられるものがたくさんあり
「そうか」と気づかされたと同時に、意識してやっていかなければならないことが鮮明になったと思います。

 

私たちデザイナーは、コンサルタントでもブランディング戦略にたけているわけでもなく
常日頃からwebや紙に特化したコードやデザインを作成し、その知識を深め、常に進み、なおかつ増え続ける技術を習得しているわけですが
極端な話、お客様からするとそんなことは”どうでもいい”のだ、ということにも気づかされました。

 

デザイナーは、人によって技術もまちまち、それでも新しい技術や新しいデザインを取り入れてお客様に喜んでもらいたい。
そう思っているのです。
私が書いているこのブログもその技術を書いている備忘録のひとつです。

 

でもお客様が作りたいのは「WEBサイト」ではないのだと。
お客様は「自分たち（会社）が抱えている問題や課題を解決するためのツール」としてのWEBサイトをつくりたいのだと。

 

小手先の細かい技術や表現したいデザインにとらわれ、本質が見えてなかったのではないかと再度考えさせられる時間でした。
そしてこれからは、重点を置くべき場所を増やして本当に「良い」と呼ばれるサイトを作っていこうと、
そのために技術面もスキルアップが必要だと感じました。

 

WEBデザイナーとして仕事をしている先輩方からすると「そんなこと今更気づいたのか？」と言われるかもしれませんが
気づいていないデザイナーは世の中にたくさんいるんではないでしょうか。

お客様との向き合い方をもう一度見直してWEBデザイナーとして、ナックウェブの一員として
もっともっと勉強していこうと思います。

 

 

長くなりましたが、toggleの応用編です！
そもそも応用編と呼んでいいのかどうかもわかりませんが笑

時々toggleを使用するシーンにぶち当たるのですが、
クリックする範囲で今回は悩まされました。

なので備忘録としてこのブログを書くことにしました。
同じようなことで悩んでいるかたは参考にしてみてください。

 

toggleで要素を表示するときの応用編

 

一般的なtoggleは以下のような感じですよね。

 

See the Pen toggle basic by sayuri (@giraffeweb) on CodePen.0

 

JSとしてはよくある感じ。

$(window).on('load',function () {
 
	$('.flower_list dl dt').on('click', function() {
		$(this).next().slideToggle();
	});
	});

.flower_list dl dtをクリックすると、clickした要素のnext（次の）要素がtoggleしますよ～という書き方。
でも、私がしたかったのは「see more」のボタンの範囲を押すとtoggleが開く方法。

これ、toggleが一つしかなかったなら問題ないんです。
こんな感じに書き換えればあっという間に終わり。

 

$(window).on('load',function () {
 
	$('.flower_list dl dt .btn').on('click', function() {
		$('.flower_list dl dt').next().slideToggle();
	});
	});

 

でもtoggleが複数ある場合、上のJSの指示をしてしまうとすべてのdd要素が開いてしまう！
ということで解決したのが以下の書き方。
プログラマーさんにお教授いただきました笑

$(window).on('load',function () {
 
	$('.flower_list dl dt .btn01').on('click', function() {
	  $(this).parents('.flower_list dl').find('dd').slideToggle();
	});
	$('.facility dl dt .btn02').on('click', function() {
	  $(this).parents('.facility dl').find('dd').slideToggle();
	});

	});

 

まず、htmlの各要素の.btnに番号を振ってあげます。

それからJSにはそのボタンを押すと、.flower_list dl dt .btn01をの.flower_list dlが親のddという子要素が開く、
という指示をしてあげればよいとのこと。

まわりくどいやり方かもしれません…。もしもっと良いやりかたあれば教えてください。

で動くようになったのがこちら！

 

See the Pen toggle 応用編 by sayuri (@giraffeweb) on CodePen.0

同じようなことで困ったときは皆さんも試してみてくださいね♪

• blog,
• code,
• web