Jimdoでjqueryを使ってアコーディオンのQ&Aページを作りました

以前からずっと作りたかったJimdoでjqueryを使って開いたり閉じたりする
「よくあるご質問・Q&Aページ」を作りました。

以前、普通のサイトで使ったときはサクっと出来たのですが

今回はあれこれ手間取ったので、備忘録として記しておきます。

 

参考にさせていただいたページは、こちらです。

分かる方は、こちらのサイト↑を読めばすぐに設定できると思うのですが、

prototype.jsと干渉して不具合が出るという部分がイマイチ分からない

私は試行錯誤してしまいました。

とりあえず「設定→ヘッダ部分を編集」に追加した分を記載して

おきます。

 

(1)まずはjqueryを読み込みます。

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>

<script type="text/javascript">
//<![CDATA[
google.load("jquery","1.4");
//]]>
</script>

(2)「jquery.js」がJimdoで使用されている「prototype.js」と干渉して不具合が

出るらしいので、その対応策です。

<script type="text/javascript">
/* <![CDATA[ */
jQuery.noConflict();
/* ]]> */
</script>

(3)最後に、よくある質問っぽいののjQueryを使ったサンプルで配布されている

qaTab.jsの「$」の部分を「jQuery」に 変更して、
<script type="text/javascript">～</script>で囲み、

そのままコピペする。

 

すみません、この部分は私がそのまま載せるのは気が引けるので、興味のある方は

ソースをご覧になって下さい。

 

あとは、先出のこちらのサイトで配布しているCSSを必要なら加工して

独自デザインのCSSの最後の部分にコピペしてやれば大丈夫。

 

・・・のはずです。

 

もっとこうやればスマートだよ！というのがあったら教えて下さ～い！