- 下の質問をクリックすると答えが開きます。
- 答えをクリックすると開いた答えが閉じます。
このような機能をjQueryを使って実装する方法です。
よくある質問
Q．こことクリックすると答えが開きますか？
A．はい開きます。そして答え（ここ）をクリックすると答えが閉じます。
Q．よくある質問などのページで質問をクリックすると回答がその場で開くものを見かけますが、どうやったら作ることが出来ますが？
A．このページの下のように設定して下さい。きっとお役に立てると思います。
Q．この仕組みはJimdo以外でも機能するのでしょうか？
A．はい。設定方法を正しく行えば、動作します。ただし、ここに書かれた方法はJimdoの利用者様向けに書いています。
使用しているHTMLのソース
※お詫び・・・以下の<div class="qanda">は以前、<div class="faq">と表記してありました。faqではうまく動作いたしません。
これを項目から文章を選択してHTMLソース編集から書きます。
<div class="qanda">
<p class="q">Q．よくある質問などのページで質問をクリックすると回答がその場で開くものを見かけますが、どうやったら作ることが出来ますが？</p>
<p class="a">A．このページの下のように設定して下さい。きっとお役に立てると思います。</p>
</div>
使用しているスタイルシートのソース
以下のスタイルシートを『独自レイアウト』の『CSS』もしくは、
『設定』から『ヘッダー部分を編集』に書き込みます。
※独自レイアウトの場合は<style>および</style>は不要です。
<style>
/* QandA
-----------------------------------------------------------------*/
.qanda{
margin-left:4em;
}
.qanda .a{
padding-bottom:0.5em;
border-bottom:2px dotted #ccc;
}
.qanda .q:hover{
font-weight:bold;
color:#000;
cursor: pointer;
}
.qanda .a:hover{
font-weight:bold;
cursor: pointer;
}
.qanda p{
margin-left:-2em;
text-indent:-2em;
padding-right:1em;
}
.qanda p span{
display:inline-block;
margin-left:1.5em;
}
</style>
jQueryの書き方
以下のjQueryのソースを、質問の一番後ろで『項目』から『ウィジェット』を選んで貼付で保存します。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script><script type="text/javascript">
//<![CDATA[
//jQuery.noConflict();
$(document).ready(function(){
$(".qanda .a").hide();
$(".qanda p.q").click(function(){
$(this).next().show("slow");
// $(this).css({font-weight:"bold"});
});
$(".qanda p.a").click(function(){
$(this).hide("slow");
// $(this).css({font-weight:"normal"});
});
$("#fukidashi").mousemove(function(){
$("#fukidashi img").css({display:"block"});
});
$("#fukidashi").mouseout(function(){
$("#fukidashi img").css({display:"none"});
});
});
//]]>
</script>