teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

SCSSをCSSへ変更しました。アコーディオン 機能の定義を追加しました。

2020/11/17 04:29

投稿

kiyomasa
kiyomasa

スコア40

title CHANGED
File without changes
body CHANGED
@@ -4,10 +4,14 @@
4
4
  以下サイトの例を参考にアコーディオンの作成をしているのですが、なぜかうまくいきません。
5
5
  https://flex-box.net/js-accordion/#co-index-10
6
6
 
7
+ 追記
8
+ ※アコーディオン は、<H4 class="js_accordion_title">をクリックすると、.accordion_contentが開く。
7
- なぜうまくかないのか教えていただきたいです。
9
+ 再度、js_accordion_titleをクリックすると開いている.accordion_contentが閉じる とうものです。
8
- よろしくお願いします。
9
10
 
11
+ このままでは開きもしませんし、閉じもしません。
10
12
 
13
+
14
+
11
15
  ### 発生している問題・エラーメッセージ
12
16
 
13
17
  ```
@@ -50,21 +54,24 @@
50
54
  </body>
51
55
  </html>
52
56
  ```
53
- ```scss
57
+ ```CSS
54
58
  @charset "UTF-8";
55
59
 
56
- *{
60
+ {
57
- margin:0;
61
+ margin: 0;
58
- padding:0;
62
+ padding: 0;
59
- }
63
+ }
64
+
60
- .accordion{
65
+ .accordion{
61
- margin-top:10px;
66
+ margin-top: 10px;
62
- }
67
+ }
68
+
63
- .accordion_container{
69
+ .accordion_container {
64
- width:300px;
70
+ width: 300px;
65
- margin:0 auto;
71
+ margin: 0 auto;
66
- }
72
+ }
73
+
67
- .accordion_title{
74
+ .accordion_title {
68
75
  background-color: #000;
69
76
  border: 1px solid transparent;
70
77
  color: #fff;
@@ -73,34 +80,39 @@
73
80
  position: relative;
74
81
  cursor: pointer;
75
82
  user-select: none;
76
-
83
+ }
84
+
77
- &::before, &::after {
85
+ .accordion_title::before, .accordion_title::after {
78
- content: '';
86
+ content: '';
79
- display: block;
87
+ display: block;
80
- background-color: #fff;
88
+ background-color: #fff;
81
- position: absolute;
89
+ position: absolute;
82
- top: 50%;
90
+ top: 50%;
83
- width: 15px;
91
+ width: 15px;
84
- height: 2px;
92
+ height: 2px;
85
- right: 25px;
93
+ right: 25px;
86
- }
94
+ }
95
+
87
- &::after{
96
+ .accordion_title::after {
88
- transform: rotate(90deg);
97
+ transform: rotate(90deg);
89
- transition-duration: .3s;
98
+ transition-duration: .3s;
90
- }
99
+ }
100
+
101
+ .accordion_title:hover,
102
+ .accordion_title:active,
91
- &:hover,.active,.is-active{
103
+ .accordion_title.is-active {
92
- background-color: #00aaa7;
104
+ background-color: #00aaa7;
93
- }
105
+ }
94
- .is-active{
106
+
95
- &::before{
107
+ .accordion_title.is-active::before {
96
- opacity:0;
108
+ opacity: 0;
97
- }
109
+ }
110
+
98
- &::after{
111
+ .accordion_title.is-active::after {
99
- transform:rolate(0);
112
+ transform: rotate(0);
100
- }
113
+ }
101
- }
114
+
102
- }
103
- .accordion_content{
115
+ .accordion_content {
104
116
  border-left: 1px solid transparent;
105
117
  border-right: 1px solid transparent;
106
118
  padding: 0 1.5em;
@@ -109,8 +121,9 @@
109
121
  overflow: hidden;
110
122
  opacity: 0;
111
123
  transition-duration: .3s;
112
- }
124
+ }
125
+
113
- .accordion__content.is-open {
126
+ .accordion_content.is-open {
114
127
  border: 1px solid #00aaa7;
115
128
  padding: .625em 1.5em;
116
129
  line-height: normal; /* numberに書き換える*/