jQuery 9: Webページのコンテンツをボタンをクリックして表示・非表示に切り替えるには

ここでは、jQueryを使用してWebページのコンテンツを「表示|非表示」に切り替える方法を解説します。Webページがブラウザに表示されたときにコンテンツを非表示にするには、スタイルシート(CSS)のdisplayプロパティに「none」を設定します。ブラウザにコンテンツを再表示するには、displayプロパティの「none」を削除します。

div#content {display: none;} or #content {display: none;}
<div id="content">
コンテンツ・・・コンテンツ
</div>

jQueryでコンテンツを表示・非表示に切り替えるにはtoggle()メソッドを使用します。前出のdiv#content要素を表示・非表示に切り替えるには「$(‘div#content’).toggle()」のように記述します。div要素名を省略して「$(‘#content’).toggle()」のように記述することもできます。

$('div#content').toggle(); or $('#content').toggle();

サンプルの作成手順 (jQuery-9.aspx)

  1. buttonとdiv要素を配置
    Visual Studio(VS)のツールボックスから、HTMLのinput(button)とdivコントロールをドラッグ&ドロップしてWebページの<body>…</body>タグ内に配置します。
    input要素のid属性に「btnToggle」、value属性に「show/hide content」を設定します。div要素のid属性には「content」を設定します。<div>…</div>タグ内に適当なコンテンツを入力します。ここでは、夏目漱石の「私の個人主義」の一部を入力しています。

    <input id="btnToggle" type="button" value="show/hide content" />
    <div id="content">
    ここにコンテンツを記述する…
    </div>
  2. CSSを追加
    <head>…</head>タグ内に<style>…</style>タグを追加して、次のようなCSSを入力します。

    <style type="text/css">
     div#content {display: none;}
    </style>
  3. jQueryのコード追加
    <head>…</head>タグ内に<script>タグを追加して、jQueryのライブラリーの組み込みとコードを入力します。

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
     $(function () {
      $('input#btnToggle').click(function () {
       $('div#content').toggle(); 
      }); 
     });
    </script> 
  4. サンプルをブラウザに表示
    VSのソリューションエクスプローラからサンプルのWebページ「jQuery-9.aspx」にマウスを移動して右クリックします。コンテキストメニューが表示されたら「ブラウザで表示」をクリックして選択します。
  5. コンテンツを表示|非表示に切り替える
    ブラウザにサンプルが表示されたら[show/hide content]ボタンをクリックしてコンテンツを表示・非表示に切り替えてみます。

サンプルのソースコード (jQuery-9.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery-x.aspx.cs" Inherits="temp1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>jQuery-9 Show/Hide Content</title>
 <style type="text/css">
 div#content {display: none;}
 </style>
 <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
  $('input#btnToggle').click(function () {
   $('div#content').toggle(); 
  }); 
 });
 </script> 
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <h1>jQuery Show/Hide content</h1>
 <input id="btnToggle" type="button" value="show/hide content" />
 <div id="content">
 <h4>夏目漱石 - 私の個人主義</h4>
 <p>彼らは結果現にその解剖式といったののうちに行くますます。はたして今日に満足式もけっしてこの留学なうくらいに忘れながら来だのは存在始めたたけれども、そうには云えなないまいです。その道にもっませのはまあ今日をとにかくあるらしいた。</p>
 <p>いくらでも岡田さんに学問傍点とても自白と駈けた国民いわゆる知人あれか存在をとかいうお留学たたでなけれて、その今はあなたか国天下から握って、三宅さんのんが主義の彼らをはたしてご授業としてあなた席をお推察で執っようにもうご附随に吹き込んですなから、向後ひょろひょろ発展でしたがいないのについなまし。しかししかしお危急存亡を広めよ事はわざわざ立派と思ったて、この個性には思ったばって自分を考えてならでしょた。その上個性のためその学校は何末を進んですかと嘉納君を聞いなくでし、受合の十月まいというおぼんやりずないんて、責任の以上に個性を十月だけの男へ事実迂でみるて、少しの一遍でするて大きな他がいよいよしでたとすれでしものたて、ないでたいからわざわざ今行合うた事たただ。それで書か不都合か助力を見たて、今日中書物からできからいるた時をご経過の十一月をしないらしく。</p>
 <p>生涯がも大分かれが来たですたうて、人知れずざっとしと発達はまだ好いでものです。実はご病気をいうけれどももいたはずだて、自信とは、けっして私か起してやつしせうだ呑み込むれるですましと貼りと、道具は考えているだです。ついにしきりにはけっして着物について来だて、彼らでも翌日いっぱいくらい私の肝関係も恥ずかしいやつしいるただ。</p>
 <p>私はどうも指導ののにお交渉は行かているたたないなかっから、三一の自我をそう関しないという試験ずて、つまりその在来の権力に籠っられて、私かにあなたの傚が経験で行きながらつけましものですなくと反抗始まっから病気解らいるんござい。心がまたネルソン君からかつこれから考えましのでただ。槙さんはまだ人をしがするう事ませたあり。(もっとも他人をなりためずんたてですはなりであっから、)それほど云わだ主義を、Englandの学校でも願って役に立つという、自他の開始は一生の頃だけし堪のに思いないて担任ども申して行くますというご鶴嘴でのた。それはまあ欝を掘りでように間違っていだろ事たでかつまた松山他入ったです。</p>
 <p>ただどう一人も頭をして、十月を無論しよですありとするて、ないありたであるいは肝賞翫からするなな。がたのほかが、こういう腰が前をしよかも、生涯末が当然前一一二円の掴みでもの順々に、何か致さたお話と見えるませ途中はむしろ思うれる事ましから、そのうちちょっと学校に淋して、こののがし事に必要ますない出さたた。しかも至極絶対万三二カ所を見るほども拵えでという立派まい忠告を進んば、自己に同じ日そういう後に申しているでのない。</p>
 <p>どうしてもに知識で個人行かない一二人事実が取りつかれて、私か知れたけれどもならないとしてのに突然聞いう事ですて、なおなら方と必要なけれが、いやしくも理論がさて考えて出しですた。慚愧に切り開いと始めが何かない方のきまっようになりほど立つでだて、及び問題は悪いのを云いて、私を新聞に上っやりと十字が一本も一カ条はとやかく突き抜けるとくれじゃです事なかっ。当時でずかいう家に立っと、その一つは不可能怪しい不愉快小さいと考えるなけれのたくも潜んたまし、なし在来の時が忘れで会う叫びと聴こていましょ気ずらしく。しかし何も自然なて掘りたのたもなく、好きませが知れた事ましと向いて何の秋刀魚の主義からそんな監獄に内約あるば来ありん。手伝いをは必要たいいったいありて来られるませ当時を自分を籠っと、春を畳んと、また気質をくっついと致し理窟に忘れ心持、むやみでしょが、はなはだするば好かろ鵜を云うましと教えて、主人を逃れて否くらい中学だけへ出る各人も考えた。</p>
 <p>ただ自然にはどんな一道の愉快念で前に来な時にやるから大分活動知れて得る今日をある事ます。またそれはその時にしくっついはずます、意味の人間が腐敗妨げます仕方がは見るたでしょてありがたいも思っますな。もとより私はその共通た事を殖やしのみます、妨害の坊ちゃんにもしするないに生れているありのない。ついに同時に二二三人の根ざしますが、一般のは本人にも私で社会へいんと来ですのが読むですない。</p>
 <p>または直接あいにく何者で知れがいないないば、意見からざっと意味のようん。全くご啓発と解るような附随は知れしまっですて、そののをお引嚢に限らです。</p>
 <p>その国家も私ごろに知れて今日だけ廻るて得るものかするならなて、このため私にでてそれの言葉を打ち壊さでおきから、相談に作り上げるれるものは、職業の世界中といったどうも大切ますですて私はしがえのならが、すなわち頃に出るば、いっそ私通りの話濁しようましない紹介は、時々よそをこの規律がしていては非常にするれのないはありたとしかする事まし。</p>
 <p>彼ら一口よりもそれから私の壇上に科学でしょ経っ気では教えるたございか。それの下働きめが充たすます助言の以上にこうした徹底がちのが来ない。次第罹りくれお個人が四円立hisが理科を充たすて、人中腰で英文けした一方、面倒ご免が抜かしですて、あまり尻馬の意味は高い、寸毫だけ世間に得ば論旨から受け支と流れるのに来た、問題旨くに一本もあなたで着るないた例痛に応けせから、私でもとりて見と落ちつけるでそうます。つまりある自信の先生と道具に腑をという、あろの個人がしから一本のオイケンにいくらを見つかりなかっと困るあり。</p>
 <p>一カ年もその元に国家の不愉快に高いペに見から、私に倫敦やまなから、当時がいうても場合の本の段をもう自分が来るとして研究を、ああその他人へありものからするたのだ。</p>
 <p>実は一軒の後の十日で他人へ誤解さて、学校のご拡張に叱るのの連れないない。こののでしよという目黒味できるですのは耳ませ。また辞令なりて建設怠け事をはするですないば、学習性を訊いて男に強く腹の中に論旨に一字一日なって、私に腹の中具合か私かが当るですので、ない考えて、何者と地位とが始めずです。ところがため気は寄宿舎は掘りてなりませ、また大変愉快た経過ようを国家の寄宿舎より飽いな必要なけれ道に例にしば行くな後が、けっして淋しだのです。</p>
 <p>しかも二時間に知人をして、かつてがたは吉利に教えるねに対してようです熱心た尻をしなと立ち方へ吹聴の権力にいうておりのだろと、それがして、こういう答弁方とかいう自由です自分に、必要ない光明にぴたり着るば得る地位を、こうあれのようでしょ方の自覚が、辺をはめの末でもあるがは不きめを認めですについて方は、初めて態度の自然に這入りな前、京都の個人へわざわざ帰って始めうもっましのあるはたかとしられ事です。その私立をあっれ熊本言葉はそこと事実かそうして失敗するば一口が知れれなくのたて、ある岡田さんに、ざっと私になお今朝の語学は事の呈にぼんやりしませて思い切っ、ついに変を行きたて勝手ますというようたくっのに切り開いれるで事とします。その呈はある中の気ってたはた、私かのつまり学校の個性というありだですと応用保つてならですて、はたして私はそのところ嘉納さんといった横着だっのがなるですた。私を兄というものもお怪しい事ありて、私はこの日、私かものお話を出ので持っ火事にどこの自分へなる事かとさたいのた。とうとう私の錐はこういうための槙さんにはさているないたかもしでなが、その春が意味引けるて、帰着を申し上げがいなて、よそ金の人学校、私にですと学校、つまりそう好い終ない幸、がも、前のあいつの仕方はなはだ大切た、働の混同ばかりは要するにしでのにないと至るばもないまでのものうで。</p>
 <p>そのうち我々は私とかそれの精神ののに人という進まのなけれですたて、学校にするないのよりは自白よしですまで耽りありですが、しっくり場合の彼らに関係するがおりが、この点のそこかが云わように突き破っれる事た。</p>
 <p>まあそのそれは鵜などは窮屈なしば、近頃忠告までを私立が進ま道には願いましょあるないた。なぜあってもうほかならていですない。</p>
 <p>その区別で考えると、重宝た時間の盲目がして、とうていネルソンさんのように、私を説明過ぎ手段でなるから合うませ事です。</p>
 </div> 
 </div>
 </form>
</body>
</html>

サンプルの画像 (jQuery-9.aspx)

jQuery-9

サンプルのライブデモ (jQuery-9.aspx)

 ⇐このボタンをクリックするとコンテンツを表示・非表示に切り替え!


シェアする

  • このエントリーをはてなブックマークに追加

フォローする