HTMLにおいてのタブ(?)閉じ

Question

###実現したいこと
TEST1,2,3をそれぞれクリックするとTESTtext1,2,3が表示されます。
Test1を開いた状態のときにTEST2開くとTESTtext1の下にTESTtext2が表示されます。
その場合にTESTtext1を自動的に閉じてTESTtext2を表示させたい。(TEST2→TEST3, TEST3→TEST1, etc...も同様)

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

開いたメッセージを自動的に閉じることができない

エラーメッセージφ

###該当のソースコード

    <div onclick="obj=document.getElementById('open1').style; obj.display=(obj.display=='none')?'block':'none';">
        <li><a href="#1" style="cursor:pointer;">TEST1</a></li></div>

    <div id="open1" style="display:none;clear:both;">
TESTtext1
    </div>

    <div onclick="obj=document.getElementById('open2').style; obj.display=(obj.display=='none')?'block':'none';">
        <li><a href="#1" style="cursor:pointer;">TEST2</a></li></div>

    <div id="open2" style="display:none;clear:both;">
TESTtext2
    </div>    

<div onclick="obj=document.getElementById('open3').style; obj.display=(obj.display=='none')?'block':'none';">
        <li><a href="#1" style="cursor:pointer;">TEST3</a></li></div>

    <div id="open3" style="display:none;clear:both;">
TESTtext3
    </div>    

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、質問タグにJavaScriptを追加することをお勧めします。

[yambejp]

いまはアンカーのTESTをクリックするとTESTTextが表示されますが、その後何をどうしたいかわかりません

Answer 1

HTML+CSSで。

<div class="wrap">
	<label for="a">TEST1</label>
	<input type="radio" name="a" id="a">
	<div>TEST1TEST1</div>
</div>
<div class="wrap">
	<label for="b">TEST2</label>
	<input type="radio" name="a" id="b">
	<div>TEST2TEST2</div>
</div>
<div class="wrap">
	<label for="c">TEST3</label>
	<input type="radio" name="a" id="c">
	<div>TEST3TEST3</div>
</div>
<div class="wrap">
	<label for="d">TEST4</label>
	<input type="radio" name="a" id="d">
	<div>TEST4TEST4</div>
</div>
<div class="wrap">
	<label for="e">TEST5</label>
	<input type="radio" name="a" id="e">
	<div>TEST5TEST5</div>
</div>

.wrap {
	margin: 1em;
	overflow: hidden;
	position: relative;
}
.wrap label {
	cursor: pointer;
}
.wrap input[type="radio"] {
	position: absolute;
	right: 100%;
}
.wrap div {
	display: none;
}
.wrap input[type="radio"]:checked + div {
	display: block;
}
```**動くサンプル：**[https://jsfiddle.net/nnceqz8s/](https://jsfiddle.net/nnceqz8s/)

Comments

[TKlosu]

li要素にしたい場合はliの中に一番外のdivを入れればよいだけですか？

[kei344]

li要素はul要素の直下にしか置けないので、質問文にあるような書き方はできませんが、下記のようにしても動くと思いますよ。
<ul>
<li class="wrap">
<label for="a">TEST1</label>
<input type="radio" name="a" id="a">
<div>TEST1TEST1</div>
</li>
</ul>
https://jsfiddle.net/nnceqz8s/1/

[TKlosu]

解決しました
ありがとうございます