javascriptでclassNameが変更できない

accordion-header をクリックしたら、accordion-bodyを表示・非常時にする処理をしたいのですが、以下のacc_b.className = '';（表示)の処理が動きません。なぜなんでしょうか。

html
1
2<style>
3
4.hidden {
5  display: none;
6}
7
8</style>
9
10      <div class="container">
11        <div class="accordion">
12          <div id="accordion-header">
13            検索条件
14          </div>
15          <div id="accordion-body">
16            検索項目
17          </div>
18        </div>
19      </div>
20    </section>
21
22<script>
23(function() {
24  'use strict';
25
26  var acc_h = document.getElementById('accordion-header');
27  var acc_b = document.getElementById('accordion-body');
28
29  acc_h.addEventListener('click', function() {
30    if (acc_b.className == 'hidden') {
31      acc_b.className = '';
32      console.log(acc_b);
33    }
34    acc_b.className = 'hidden';
35  });
36
37})();
38</script>

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

回答2件

これでどうでしょうか？

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .hidden {
13            display: none;
14        }
15    </style>
16</head>
17<body>
18<section>
19    <div class="container">
20        <div class="accordion">
21            <div id="accordion-header">
22                検索条件
23            </div>
24            <div id="accordion-body" class="hidden">
25                検索項目
26            </div>
27        </div>
28    </div>
29</section>
30
31<script>
32    (function () {
33        'use strict';
34
35        var acc_h = document.getElementById('accordion-header');
36        var acc_b = document.getElementById('accordion-body');
37
38        acc_h.addEventListener('click', function () {
39            if (acc_b.className === 'hidden') {
40                acc_b.className = '';
41            } else {
42                acc_b.className = 'hidden';
43            }
44        });
45
46    })();
47</script>
48</body>
49</html>

投稿2017/03/06 15:37

s8_chu

総合スコア14731

退会済みユーザー

2017/03/07 00:08

ご回答ありがとうございます。

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

ベストアンサー

JavaScript
1    if (acc_b.className == 'hidden') {
2      acc_b.className = '';
3      console.log(acc_b);
4    }
5    acc_b.className = 'hidden'; // 上のifがどっちでも必ずこれが実行されるからでは？