こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

どなたかご教授願います。

javascript(jQuery)を利用した表示・非表示を切り替えるやり方はいろいろあると思うのですが、私が思うようなものが実現できません。

個人的ポイントは、

初期状態では表示された状態
ボタンを押すごとに表示・非表示を切り替えられる
1ページ内に複数ボタンを設置
1つのボタンで複数個所のエリアの表示・非表示を適用する
ボタンから離れた場所のエリアを表示・非表示にする
状態をクッキーに保存する
コードの可能な限りの簡略化
(※構築イメージは添付ファイルを参照ください。)

です。よろしくお願い致します。


参考にした質問・知恵袋・サイト様

(1)
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12114911402
(2)
http://blog.caraldo.net/2009/03/jqcookiemenu.php
(3)
http://okwave.jp/qa/q7259699.html

→(1)複数ボタンを設置する場合は、それだけコードを増やさなければならない。また、1つのボタンで適用されるのは1ヵ所のみ。
→(2)複数ボタンの設置のコードは(1)に比べ少なくて済むが、こちらも1つのボタンで適用されるのは1ヵ所のみ。
→(3)1つのボタンで複数個所を非表示にすることが出来るが、再び表示する場合にはクッキーを初期化しなければならない。また、コードが隣接していなければならない。
(※一部コードを書き換えれば実現可能かもしれませんが私の理解レベルではこれが限界です。申し訳ありません。)

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2014-09-28 13:13:20

QNo.8771401

困ってます

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

どのようなマークアップを想定しているのかも不明なので、ひとつの考え方の例として簡略化したサンプルを…
クッキーは考慮していませんが、その時の状態を保存する部分と、初期表示を追加する感じ。

ご質問文にいろいろと書いてはありますが、例えば『エリアA(非表示)、エリアB(表示)』の状態で、ボタンBを操作するとどうなるのかなどが不明です。とりあえず、常にその時の状態の反転(トグル)になると仮定。

(全角空白は半角に)
<!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-29 17:25:45

補足

ご回答ありがとうございます。
ご質問の件について返答させていただきます。

>例えば『エリアA(非表示)、エリアB(表示)』の状態で、ボタンBを操作するとどうなるのかなどが不明です。
『エリアA(非表示)、エリアB(非表示)』となります。
ボタンBを押してもエリアAにはまったく干渉せず、エリアBのみ表示→非表示→表示→…の繰り返しを想定しております。

コードをお書きいただきましたが、

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


★ボタンAを押した場合のイメージ

///before///
 記事  
(area A)
 記事2  
(area B)
 記事3  
(area B)

[ボタンA]ポチッ
[ボタンB]

///after///
 記事  
 記事2  
(area B)
 記事3  
(area B)


★ボタンBを押した場合イメージ

///before///
 記事  
(area A)
 記事2  
(area B)
 記事3  
(area B)

[ボタンA]
[ボタンB]ポチッ

///after///
 記事  
(area A)
 記事2  
 記事3  


3つ目のidがBでないといけない理由は記事欄のhtmlコードは共通で、どれも同じものになるためCDEF…と増やせません。

投稿日時 - 2014-09-29 20:04:06

お礼

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

投稿日時 - 2014-09-30 00:05:23

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

作成依頼ってことかな?
http://lancers.jp
こういったところで作ってもらうレベルだと思うよ。

投稿日時 - 2014-09-29 12:10:19

お礼

自己解決しました。ありがとうございました。

投稿日時 - 2014-09-30 00:06:28

あなたにオススメの質問