JavaScriptで複数の表示・非表示切り替え

2014/09/28 13:13

このQ&Aのポイント

JavaScript(jQuery)を利用した表示・非表示を切り替える方法についてご教示願います。初期状態では表示されており、ボタンを押すと表示・非表示を切り替えられ、１ページ内に複数のボタンを設置して、１つのボタンで複数個所のエリアの表示・非表示ができる方法を知りたいです。また、エリアの表示・非表示をクッキーに保存する方法やコードの簡略化についても教えてください。
私はJavaScript(jQuery)を使って表示・非表示を切り替える方法を探しています。具体的には、初期状態では表示されており、ボタンを押すと表示・非表示が切り替わるような仕組みを作りたいです。さらに、１ページ内に複数のボタンを設置し、１つのボタンで複数個所のエリアの表示・非表示を切り替えられる方法も知りたいです。また、エリアの表示・非表示の状態をクッキーに保存する方法や、コードを簡略化する方法についても教えていただきたいです。
JavaScript(jQuery)を使用して表示・非表示を切り替える方法について教えてください。初めの状態では表示されており、ボタンをクリックすると表示・非表示が切り替わるような仕組みが欲しいです。また、同じページに複数のボタンを設置し、１つのボタンで複数のエリアの表示・非表示を切り替える方法も知りたいです。また、クッキーを使用してエリアの表示・非表示の状態を記録し、コードを簡潔にする方法についても教えていただきたいです。

shiroto_4610
お礼率100% (2/2)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2014/09/29 17:25 回答No.2

どのようなマークアップを想定しているのかも不明なので、ひとつの考え方の例として簡略化したサンプルを… クッキーは考慮していませんが、その時の状態を保存する部分と、初期表示を追加する感じ。ご質問文にいろいろと書いてはありますが、例えば『エリアＡ（非表示）、エリアＢ（表示）』の状態で、ボタンＢを操作するとどうなるのかなどが不明です。とりあえず、常にその時の状態の反転（トグル）になると仮定。（全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> body{ width:800px; } div.articles{ width:700px; float:left; } div.article{ height:250px; position:relative; border:1px solid gray; } #A, #B, #C { width:500px; height:100px; position:absolute; 　　　　　　right:10px; bottom:10px; background-color:#DDD; } div.buttons{ width:95px; float:right; } div.buttons button{ width:100%; display:block; margin-bottom:10px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ 　$("div.buttons button").click(function(){ 　　$(this.value).slideToggle(); 　}); }); </script> </head> <body> <div class="articles"> <div class="article"> 　記事　<div id="A">（area A）</div> </div> <div class="article"> 　記事2 　<div id="B">（area B）</div> </div> <div class="article"> 　記事3 　<div id="C">（area C）</div> </div> </div> <div class="buttons"> 　<button type="button" value="#A">area A</button> 　<button type="button" value="#A,#B">area A&B</button> 　<button type="button" value="#B,#C">area B&C</button> 　<button type="button" value="#A,#C">area A&C</button> 　<button type="button" value="#A,#B,#C">area A&B&C</button> </div> </body> </html>

質問者

お礼 2014/09/30 00:05

jQueryのshowhide.jsを使って希望のものが実現できました。お手数をおかけしました。

質問者

補足 2014/09/29 20:04

ご回答ありがとうございます。ご質問の件について返答させていただきます。 >例えば『エリアＡ（非表示）、エリアＢ（表示）』の状態で、ボタンＢを操作するとどうなるのかなどが不明です。『エリアＡ（非表示）、エリアＢ（非表示）』となります。ボタンＢを押してもエリアＡにはまったく干渉せず、エリアＢのみ表示→非表示→表示→…の繰り返しを想定しております。コードをお書きいただきましたが、 <div class="articles"> <div class="article"> 　記事　<div id="A">（area A）</div> </div> <div class="article"> 　記事2 　<div id="B">（area B）</div> </div> <div class="article"> 　記事3 　<div id="B">（area B）</div>　←ここもBになり </div> </div> <div class="buttons"> 　<button type="button" value="#A">area A</button> 　<button type="button" value="#B">area B</button>　←このボタンを押すことにより記事2と記事3の(area B)両方に影響があるものを考えています。 </div> ★ボタンＡを押した場合のイメージ ///before/// 　記事　（area A）　記事2 　（area B）　記事3 　（area B） [ボタンA]ポチッ [ボタンB] ///after/// 　記事　　記事2 　（area B）　記事3 　（area B） ★ボタンＢを押した場合イメージ ///before/// 　記事　（area A）　記事2 　（area B）　記事3 　（area B） [ボタンA] [ボタンB]ポチッ ///after/// 　記事　（area A）　記事2 　　記事3 　３つ目のidがBでないといけない理由は記事欄のhtmlコードは共通で、どれも同じものになるためCDEF…と増やせません。