質問と回答をクリック展開させる方法


Jimdoに限らずホームページには「よくある質問」として質問と回答が書いてあるページがありますが、質問と回答をクリックで展開させることで観覧者に遊び心を持たせ、ホームページをよりオシャレに魅せることができます。

設置方法

① 設定メニューから基本設定を選択し「ヘッダー編集」をクリックします。

編集コマンドの基本設定を選択、次にヘッダー編集を選択

② ヘッダー編集画面に下記コードを挿入します。

NEXT

<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>

③ 文字入力部分の「HTMLを編集」部分に下記コードを挿入します。

<div class="qanda">

<p class="q">Q・質問</p>

<p class="a">A・回答</p>

</div>

【概要】

質問入力部分 Q・質問

回答入力部分 A・回答


④ 下記コード(jQeryソース)を「ウィジェット/HTML」部分に挿入します。

<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>

Jimdoカスタムのお問い合わせはこちら