JavaScriptのクリックイベントで一部要素を表示/非表示する

前提・実現したいこと

▶リスト1
▶リスト2

↑を画面とします。
画面には文字が表示され、たとえば「リスト1」をクリックすると
↓のように表が表示されるようにしたいです。

▼リスト1
▶リスト2

-------------
|項目1|説明1|
|項目2|説明2|
-------------

また、「リスト1」をクリックして「リスト2」をクリックした場合、「リスト1」の表は非表示にして「リスト2」の表が表示されるようにしたいです。

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

クリックしても表が表示されません。
エラーメッセージも出力されません。

該当のソースコード

html
1<div class="row test">
2  <label for="li1"><span>list1</span></label>
3  <label for="li2"><span>list2</span></label>
4  <br/><br/>
5  <div class="test-checkbox">
6    <input type="checkbox" id="li1">
7    <div>
8      <table class="test-table">
9        <tr>
10          <th>項目a</th>
11          <td>詳細a</td>
12        </tr>
13        <tr>
14          <th>項目b</th>
15          <td>詳細b</td>
16        </tr>
17      </table>
18    </div>
19
20    <input type="checkbox" id="li2">
21    <div>
22      <table class="test-table">
23        <tr>
24          <th>項目c</th>
25          <td>詳細c</td>
26        </tr>
27        <tr>
28          <th>項目d</th>
29          <td>詳細d</td>
30        </tr>
31      </table>
32    </div>
33  </div>
34</div>

css
1.test input {
2    display: none;
3}
4
5.test-checkbox div {
6    height: 0;
7    padding: 0;
8    overflow: hidden;
9    opacity: 0;
10    transition: 0.8s;
11}
12
13.test-table {
14    table-layout: fixed;
15    vertical-align: top;
16    white-space: nowrap;
17}
18
19.test-table th {
20    padding-right: 10px;
21    width: 100%;
22    text-align: right;
23}
24
25.test-table td {
26    width: 100%;
27    text-align: left;
28}

js
1$('.test label').on('click', function(e){
2	var idValue = e.target.htmlFor;
3
4	$('test-checkbox').hide();
5
6	$('input#' + idValue).show();
7});

試したこと

js
1$(idValue + ' div').fadeIn();
2$('input#'+idValue).fadeIn();
3$('input#'+idValue+' > *').show();

↑を書いてみたのですが変わらず表示されません。

ご教授のほどよろしくお願い致します。

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

回答1件

ベストアンサー

'input#' + idValueが表示するところまでです。

js
1$('.test label').on('click', function(e){
2 // var idValue = e.target.htmlFor;
3    var idValue = e.currentTarget.htmlFor;
4console.log(e.target); // 確認してみてください
5 // $('test-checkbox').hide();
6 // $('.test-checkbox').hide(); //クラスなので少なくともこう書く必要がありますが、表示させたいものが.test-checkboxの内包要素なので下記コードの意味がなくなる
7
8    $('input#' + idValue).show();
9});
10```**動くサンプル：**[https://jsfiddle.net/w8umeon0/](https://jsfiddle.net/w8umeon0/)
11
12---
13
14【e.targetとe.currentTargetの違い | cly7796.net】
15[http://cly7796.net/wp/javascript/e-target-and-e-current-target/](http://cly7796.net/wp/javascript/e-target-and-e-current-target/)
16
17---
18
19別解：CSSでもできます。（HTMLも少し変更しています）
20
21**動くサンプル：**[https://jsfiddle.net/36cuw07r/](https://jsfiddle.net/36cuw07r/)
22
23【CSS3 transition height 0 to auto】
24[http://css3.bradshawenterprises.com/animating_height/](http://css3.bradshawenterprises.com/animating_height/)