csstest：jQueryのhasClass、slideToggle、fadeToggleを使って、コンテンツの開閉

● hasClassを使って、開閉する要素のclass名を判定

タイトル（「サンプル」などの青い文字部分）をクリックすると、開閉する要素のステータス（この場合class名）をIF判定し、「open」なら「slideUp()」、「close」なら「slideDown()」してコンテンツを開閉し、「close」と「open」のclass名を交互に書き換えます。IF文を使っているので、開閉などの交互の動作（toggle）以外の動作も追加できます。

$(".xbox").on("click",function(){
        if($(this).hasClass("close")){
            $(this).next().slideDown();
            $(this).removeClass("close").addClass("open");
        }else{
            $(this).next().slideUp();
            $(this).removeClass("open").addClass("close");
        }    
});

サンプル（１）

[ダミーテキスト１]ポイントカードを発行し、商品の購入者に対し、次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額すること又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当しません。

● toggleClassを使って、要素を開閉（slideToggle）

同じくタイトルをクリックすると、機械的に要素を開閉します。他の動作はできませんが、その分スクリプトはシンプルになります。

$(".xbox2").on("click",function(){
        $(".xboxcnt2").slideToggle("slow");
});

サンプル（２）

[ダミーテキスト２]ポイントカードを発行し、商品の購入者に対し、次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額すること又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当しません。

● toggleClassを使い、効果を付けて、要素を開閉（fadeToggle）

サンプル（２）と同じtoggleですが、フェードアウト、フェードイン効果が付きます。

$(".xbox3").on("click", function() {
        $(".xboxcnt3").fadeToggle("slow");
});

サンプル（３）

[ダミーテキスト３]なお、対価の減額又は割戻しであっても、（１）懸賞によって減額又は割戻しの相手方を決定する場合、（２）減額又は割戻しをした金銭の使途を限定する場合、（例：旅行費用に充当させる場合）（３）同一の企画において景品類の提供とを併せて行う場合、は値引とは認められず景品類に該当することとなり，景品規制が適用されます。