アコーディオンで開閉式にしたい

html
1    <div class="qawrap">
2      <div class="quest">
3        <h5><img src="img/%EF%BC%B1_.png"></h5>
4        <div class="txt-wrap">
5          <div class="txt-wrap">
6            <div class="txt-wrap-inner">
7
8              <p><span class="ttl">注文方法について</span><br class="br">どのように購入することができますか？</p>
9            </div>
10
11          </div>
12        </div>
13        <span class="open"></span>
14      </div>
15      <div class="answ">
16        <h5>A.</h5>
17        <div class="txt-wrap">
18          <p>商品は、当サイトの購入ボタンをクリックしていただき、リンク先のサイトにてご購入いただけます。</p>
19        </div>
20      </div>
21    </div>

css
1
2 .quest,
3 .answ {
4  display: flex;
5  ;
6  align-items: center;
7  background: #e17174;
8  color: #fff;
9  padding: 10px;
10  position: relative
11}
12
13
14
15.answ h5 {
16  letter-spacing: 0.4rem
17}
18
19 .answ p {
20  width: 90%;
21  padding-left: 10px
22}
23
24 .quest span.open {
25  position: absolute;
26  top: 50%;
27  right: 20px;
28  background: #fff;
29  width: 15px;
30  height: 1px;
31  content: '';
32  display: inline-block
33}
34
35.quest img {
36  width: 35px
37}
38
39 .quest .txt-wrap {
40  padding-left: 10px;
41  width: 80%
42}
43
44.quest .txt-wrap .ttl {
45  background: #fff;
46  display: inline-block;
47  color: #222;
48  padding: 3px 10px
49}
50
51
52
53 .quest h5 {
54  font-size: 1.8rem;
55  padding-left: 10px
56}
57
58 .answ h5 {
59  font-size: 1.8rem;
60  padding-left: 10px
61}
62
63.quest,
64.answ {
65  display: flex;
66  ;
67  align-items: center;
68  background: #e17174;
69  color: #fff;
70  padding: 10px;
71  position: relative
72}
73
74 .answ {
75  background: #eee;
76  color: #52443f;
77  align-items: flex-start;
78  margin-bottom: 20px;
79  display: none
80}

js
1   'use strict';
2    $(function() {
3      $('.open').on('click', function() {
4        $(this).parent().siblings('.answ').slideToggle();
5      });
6    });
7

sapn.openをクリックすると.answが開くようにしたいのですが、エラーは出ていないため、siblingsなどの指定の仕方か何かがいけないのでしょうか。

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

回答1件

ベストアンサー

sapn.openをクリックすると.answが開くようにしたいのですが、エラーは出ていないため、siblingsなどの指定の仕方か何かがいけないのでしょうか。

現状のコードで、開閉できています。ただ、sapn.open の高さが 1px しかないためクリックするのが困難なだけです。クリックしやすいように適切な高さに設定すればいいでしょう。

css
1 .quest span.open {
2  position: absolute;
3  top: 50%;
4  right: 20px;
5  background: #fff;
6  width: 15px;
7  height: 15px; /*ここを適切な高さに変更*/
8  content: '';
9  display: inline-block
10}