【Jquery】表示・非表示ボタンの超簡単な作り方

今回は、ある要素の表示・非表示を切り替えるボタンの作成についてまとめてみました。

今回はJqueryプラグインを使用して導入を行います。

表示・非表示ボタン導入方法

まずは簡単に、ただ表示・非表示のみの処理を見ていきましょう。

<!-- HTML -->
<input class="toggle_btn" type="button" value="表示する" data-area=".sample_area" />
<div class="sample_area" style="display:none; border:1px solid red;">ここが表示・非表示エリアです。</div>

<!-- JS -->
<script>
jQuery(function($){
    $('.toggle_btn').click(function(){
        //toggleでボタンの表示と非表示を切り替える
        $($(this).data('area')).toggle();
        //ボタンのテキストを変更
        if($($(this).data('area')).css('display') == 'none'){
            $(this).val('表示する');
        }else{
            $(this).val('非表示にする');
        }
    });
});
</script>

「表示非表示切り替え」のボタンを押すことで、指定した要素を表示するか、非表示にするかを切り替えます。

ボタンに「data-area」属性をつけており、表示と非表示を切り替えたい要素を選択します。
今回はclassの「sample_area」の表示を切り替えたいので、指定は「.sample_area」となります。idなら#にしましょう。

そして、JavaScriptでボタンを押した時のイベントを設定し、「data-area」属性で設定された要素を切り替える記述を書きましょう。

「toggle」メソッドは、その要素が表示されていれば非表示、逆に非表示なら表示に切り替える便利なメソッドです。

指定した要素がしっかり切り替わっていれば成功です。

以上、表示・非表示ボタンの超簡単な作り方、でした。

コメント

タイトルとURLをコピーしました