折り畳みボタンを二つ並べて、片方を開いたら片方を閉じる動作

前提・実現したいこと

折り畳みのボタン(クリックしたら画像を表示)を二つ横並びに配置し、左が開いているときに右をクリックしたら左が閉じて右が展開、逆も同様
最初は両方閉じている状態

ボタンには画像を使用しています

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<table border="0">
2    <tr>
3        <td>
4            <div onclick="obj=document.getElementById('menu1').style; obj.display=(obj.display=='none')?'block':'none';" class="size-button-pc">
5                <a style="cursor:pointer;">
6                    <img src="img12.png">
7                </a>
8            </div>
9        </td>
10            <td>
11                <div onclick="obj=document.getElementById('menu2').style; obj.display=(obj.display=='none')?'block':'none';" class="haisou-button-pc">
12                <a style="cursor:pointer;">
13                    <img src="img14.png">
14                </a>
15                </div>
16            </td>
17    </tr>
18</table>
19
20/*隠したい画像*/
21<div id="menu1" style="display:none;clear:both;">
22    <img src="img13.png">
23</div>
24<div id="menu2" style="display:none;clear:both;">
25    <img src="img15.png">
26</div>

試したこと

onclickの中に、「obj= ~ 'none';」をmenu1とmenu2の場合どちらも書いてみましたが思ったような挙動になりませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2020/10/12 05:49

>思ったような挙動になりませんでした。起きている現象（エラーなど）を具体的に記載してください。

nolcejol

2020/10/12 05:54

どちらも閉じている状態で右側のボタンをクリックすると、左側の折り畳みが展開されます。また、左→右→左までは実現したい挙動になるのですが、次の右ボタンクリックでどちらの折り畳みも閉じてしまいます。

m.ts10806

2020/10/12 06:05

質問は編集できますので、適宜追記してください。

行動規範の内容に同意します

回答2件

ベストアンサー

インラインでJavaScriptのコードをダラダラ書くのはやめた方が良いです。styleもですけど。
可読性もメンテナンス性も悪く、問題の切り分け、デバッグがやりづらいです。

楽な考え方は「全部閉じて、必要なものだけ開ける」ですね。

css
1.none{
2	display:none;
3}
4.block{
5	display:block;
6}
7.pointer{
8	cursor:pointer;
9}

html
1
2        <td>
3            <div class="size-button-pc bt" data-target="menu1">
4                <a class="pointer">
5                    img12.png
6                </a>
7            </div>
8        </td>
9            <td>
10                <div class="haisou-button-pc bt" data-target="menu2">
11                <a class="pointer">
12                    img14.png
13                </a>
14                </div>
15        </td>
16
17
18~~中略
19<div id="menu1" class="none menu">
20   img13.png
21</div>
22<div id="menu2" class="none menu">
23    img15.png
24</div>
25

js
1window.addEventListener('DOMContentLoaded', function(event){
2	let bts = document.querySelectorAll('.bt');
3	for(let i=0;i<bts.length;i++){
4		bts[i].addEventListener('click', function(e){
5			let menus = document.querySelectorAll('.menu');
6			for(let mi=0;mi<menus.length;mi++){
7				menus[mi].classList.remove('block');
8				menus[mi].classList.add('none');
9			}
10			document.getElementById(e.currentTarget.dataset.target).classList.add('block');
11		});
12	}
13});

画像のところは画像用意が面倒だったので文字列に置き換えてます。

投稿2020/10/12 06:03

m.ts10806

総合スコア80875

html
1<table border="0">
2    <tr>
3        <td>
4            <div onclick="obj=document.getElementById('menu1').style; obj.display=(obj.display=='none')?'block':'none';document.getElementById('menu2').style.display='none';" class="size-button-pc">
5                <a style="cursor:pointer;">
6                    <img src="img12.png">
7                </a>
8            </div>
9        </td>
10            <td>
11                <div onclick="obj=document.getElementById('menu2').style; obj.display=(obj.display=='none')?'block':'none';document.getElementById('menu1').style.display='none';" class="haisou-button-pc">
12                <a style="cursor:pointer;">
13                    <img src="img14.png">
14                </a>
15                </div>
16            </td>
17    </tr>
18</table>
19
20以下略