編集履歴

質問編集履歴

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

2020/11/17 04:29

投稿

kiyomasa

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,9 +10,17 @@
+追記
+※アコーディオン は、<H4 class="js_accordion_title">をクリックすると、.accordion_contentが開く。
+再度、js_accordion_titleをクリックすると開いている.accordion_contentが閉じる　というものです。
-なぜうまくいかないのか教えていただきたいです。
+このままでは開きもしませんし、閉じもしません。
-よろしくお願いします。
@@ -102,35 +110,41 @@
 ```
-```scss
+```CSS
 @charset "UTF-8";
-*{
+＊{
-    margin:0;
+    margin: 0;
-    padding:0;
+    padding: 0;
-}
+  }
-.accordion{
+  .accordion{
-    margin-top:10px;
+    margin-top: 10px;
-}
+  }
-.accordion_container{
+  .accordion_container {
-    width:300px;
+    width: 300px;
-    margin:0 auto;
+    margin: 0 auto;
-}
+  }
-.accordion_title{
+  .accordion_title {
     background-color: #000;
@@ -148,122 +162,134 @@
     user-select: none;
+  }
-    &::before, &::after {
+  .accordion_title::before, .accordion_title::after {
-        content: '';
+    content: '';
-        display: block;
+    display: block;
-        background-color: #fff;
+    background-color: #fff;
-        position: absolute;
+    position: absolute;
-        top: 50%;
+    top: 50%;
-        width: 15px;
+    width: 15px;
-        height: 2px;
+    height: 2px;
-        right: 25px;
+    right: 25px;
+  }
+  .accordion_title::after {
+    transform: rotate(90deg);
+    transition-duration: .3s;
+  }
+  .accordion_title:hover,
+  .accordion_title:active,
+  .accordion_title.is-active {
+    background-color: #00aaa7;
+  }
+  .accordion_title.is-active::before {
+    opacity: 0;
+  }
+  .accordion_title.is-active::after {
+    transform: rotate(0);
+  }
+  .accordion_content {
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    padding: 0 1.5em;
+    line-height: 0;
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition-duration: .3s;
+  }
+  .accordion_content.is-open {
+    border: 1px solid #00aaa7;
+    padding: .625em 1.5em;
+    line-height: normal; /* numberに書き換える*/
+    height: auto;
+    opacity: 1;
+  }
+```
+```javascript
+ document.addEventListener("DOMContentLoaded",() => {
+    const title = document.querySelectorAll('.js-accordion-title');
+    for (let i = 0; i < title.length; i++){
+      let titleEach = title[i];
+      let content = titleEach.nextElementSibling;
+      titleEach.addEventListener('click', () => {
+        titleEach.classList.toggle('is-active');
+        content.classList.toggle('is-open');
+      });
     }
-    &::after{
-        transform: rotate(90deg);
-        transition-duration: .3s;
-    }
-    &:hover,.active,.is-active{
-        background-color: #00aaa7;
-    }
-    .is-active{
-        &::before{
-            opacity:0;
-        }
-        &::after{
-            transform:rolate(0);
-        }
-    }
-}
-.accordion_content{
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-    padding: 0 1.5em;
-    line-height: 0;
-    height: 0;
-    overflow: hidden;
-    opacity: 0;
-    transition-duration: .3s;
-}
-.accordion__content.is-open {
-    border: 1px solid #00aaa7;
-    padding: .625em 1.5em;
-    line-height: normal; /* numberに書き換える*/
-    height: auto;
-    opacity: 1;
-  }
-```
-```javascript
- document.addEventListener("DOMContentLoaded",() => {
-    const title = document.querySelectorAll('.js-accordion-title');
-    for (let i = 0; i < title.length; i++){
-      let titleEach = title[i];
-      let content = titleEach.nextElementSibling;
-      titleEach.addEventListener('click', () => {
-        titleEach.classList.toggle('is-active');
-        content.classList.toggle('is-open');
-      });
-    }
   });