（昨日、おととい、3日前のブログもご参照ください）
＜今回の成果＞
・やりたかったことが、別のjQueryで実現できました。
・前回よりもソースコードが減りました。4割減くらいに。
使ったのは「jquery.switchHat.js」です。
→switchHat.jsのサンプル
こちらのサイトからサンプル一式をダウンロードして、
その中のjquery.switchHat.jsを使います。
jquery.switchHat.jsとGoogle先生からのjQueryだけ読み込みました。
あと、中身を読めばわかるのですが、
「表示する ＋」で開いて「表示する －」で閉じるようになっています。
この＋と－はCSSで操作しておりましたので、
switchHat.cssも読み込みます。
もうこれでだいたい完成なのですが、
せっかくなのでよく分析してカスタマイズもしてみます。
私が作りたいのはFAQで質問が20くらいあるものです。
jQueryの折りたたみのところでIDをセットしていたので、
下記のように複数を振りやすくしました。
switchBtn: ’.switchHat’,
↓ひとつひとつIDを振っていけばいいんですね。
switchBtn: ’.SH01’, ’.SH02’, ’.SH03’, ’.SH04’,・・・・
同様に表示される文章のIDも
switchContents: ’.switchDetail’,
↓
switchContents: ’.SD01’, ’.SD02’, ’.SD03’, ’.SD04’,・・・・
一方、CSSの方では開く前は＋、開いたら－がつく仕組みがあります。
.switchHat:after {
content: "＋";
↓afterをbeforeにすると、「＋ 表示する」になります。（スペース注意）
また、文字も自由に変えられます。
.switchHat:before {
content: "▽";
※文章が開いている最中（nowOpen）のプロパティも同様に変更可能
これで、開閉するためにクリックする文章と、
クリック後に表示される文章それぞれにIDを割り振っておきます。
【クリックする文章】<div class="SwitchHat switchOn SH01">表示する</div>
【表示される文章】<div class="SD01">この文章が表示される</div>
ちなみに、switchOnは触れていないけど必要なクラスです。
正確に言うとクラスとIDわけるんですよね。（きっと。素人の調査より）
SwitchHatやswitchOnがクラスで、SH01とSD01とかはIDですね。
で、いいんですよね？？
やったーできた！
でも、開くスピード遅いなぁと感じた御仁、
その場合はjquery.switchHat.jsで「"slow"」の文字を検索して
「"fast"」にするとか、「300」などの数字に置き換えてください。
数字はミリ秒です。
ホントは「こんなFAQができました」とか、
「全体はこんなソースです」とか載せたりしたいのですが、
はじめてソースをブログに書いてて消耗しきったので
いまはゴメンナサイ。。 。
きっとこれもツールがあるんだろうなぁ。
いやー、プログラミングの世界って本当に面白いですね。
本気で楽しかったです。
でも何か解決したいことがあってこのサイトを見た人からすると、
技術の解説も適当だし、ブログとしても半端だしで、
参考にならないんだろうな。
そんなモヤモヤにとどめを刺すべく、
以下、今回のプログラミングで気づいたこと。
＜今回の感想＞
・面倒だな、と思ったことはすでにネットで解決している。
・ネットで解決した時期により、その技術は古くなっている。
・その時期というのは3～4年でもすでに古い。
・証拠に、4年前の本ではこれらの技術は紹介されていない。
・3～4年と言えば、高校とか、大学とかで入学から卒業まで。
・情報処理の先生って、それについていけてるのかな？
1年生を卒業させたら、次の1年生の時には技術が更新されてる。。
・ダブルクォーテーションを表示するのに、"とか、
HTML上にソースを表記するの、めんど。
・HTML知識にCSSが少し乗った程度でJavaScriptとjQueryって
結構飛ばしすぎた。まじめに順を追って学ぼう。
・楽しいからって、睡眠時間削りすぎた。
・jquery.switchHat.jsの中に、「css("cursor":"pointer")」
があったが、昨日の解決策はあながち間違いでもないんだな。
・CSSの「content」プロパティ。画像も入れられると。
・ソースを簡素化するってキモチイイ☆
・もっときれいに書けるんだろなSEのみなさん。
記述ルールとかのノウハウもぜひ知りたい・・！
以上でした。