質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

687閲覧

javascriptでアコーディオン 機能を実装したい。

kiyomasa

総合スコア40

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/17 04:08

編集2020/11/17 04:29

前提・実現したいこと

Javascriptでアコーディオンを実装したい
以下サイトの例を参考にアコーディオンの作成をしているのですが、なぜかうまくいきません。
https://flex-box.net/js-accordion/#co-index-10

追記
※アコーディオン は、<H4 class="js_accordion_title">をクリックすると、.accordion_contentが開く。
再度、js_accordion_titleをクリックすると開いている.accordion_contentが閉じる というものです。

このままでは開きもしませんし、閉じもしません。

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

エラーメッセージはありません。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <title>ninjacode</title> 8 <script 9 src="https://code.jquery.com/jquery-3.4.1.js" 10 integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 11 crossorigin="anonymous"></script> 12</head> 13<body> 14 <section class="accordion"> 15 <div class="accordion_container"> 16 <h4 class="accordion_title js_accordion_title">Accordion Title1</h4> 17 <div class="accordion_content"> 18 Accordion Content 1 19 </div> 20 <h4 class="accordion_title js_accordion_title">Accordion Title2</h4> 21 <div class="accordion_content"> 22 Accordion Content 2 23 </div> 24 <h4 class="accordion_title js_accordion_title">Accordion Title3</h4> 25 <div class="accordion_content"> 26 Accordion Content 3 27 </div> 28 </div> 29 </section> 30 <script type="text/javascript" src="sample.js"></script> 31</body> 32</html>

CSS

1@charset "UTF-8"; 2 3{ 4 margin: 0; 5 padding: 0; 6 } 7 8 .accordion{ 9 margin-top: 10px; 10 } 11 12 .accordion_container { 13 width: 300px; 14 margin: 0 auto; 15 } 16 17 .accordion_title { 18 background-color: #000; 19 border: 1px solid transparent; 20 color: #fff; 21 font-size: 1.25em; 22 padding: .625em .625em .625em 2em; 23 position: relative; 24 cursor: pointer; 25 user-select: none; 26 } 27 28 .accordion_title::before, .accordion_title::after { 29 content: ''; 30 display: block; 31 background-color: #fff; 32 position: absolute; 33 top: 50%; 34 width: 15px; 35 height: 2px; 36 right: 25px; 37 } 38 39 .accordion_title::after { 40 transform: rotate(90deg); 41 transition-duration: .3s; 42 } 43 44 .accordion_title:hover, 45 .accordion_title:active, 46 .accordion_title.is-active { 47 background-color: #00aaa7; 48 } 49 50 .accordion_title.is-active::before { 51 opacity: 0; 52 } 53 54 .accordion_title.is-active::after { 55 transform: rotate(0); 56 } 57 58 .accordion_content { 59 border-left: 1px solid transparent; 60 border-right: 1px solid transparent; 61 padding: 0 1.5em; 62 line-height: 0; 63 height: 0; 64 overflow: hidden; 65 opacity: 0; 66 transition-duration: .3s; 67 } 68 69 .accordion_content.is-open { 70 border: 1px solid #00aaa7; 71 padding: .625em 1.5em; 72 line-height: normal; /* numberに書き換える*/ 73 height: auto; 74 opacity: 1; 75 }

javascript

1 2 document.addEventListener("DOMContentLoaded",() => { 3 const title = document.querySelectorAll('.js-accordion-title'); 4 5 for (let i = 0; i < title.length; i++){ 6 let titleEach = title[i]; 7 let content = titleEach.nextElementSibling; 8 titleEach.addEventListener('click', () => { 9 titleEach.classList.toggle('is-active'); 10 content.classList.toggle('is-open'); 11 }); 12 } 13 14 }); 15

試したこと

Javascript,HTMLのスペルミスはないと思っています。(サイトのコードをコピペしましたが、機能しませんでした。)

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/11/17 04:14 編集

アコーディオンの定義をしてください 特定のメニューで他のメニューが閉じる必要はあるのか重要です またSCSSはできれば通常のCSSでやるほうがバグの切り分けがしやすいでしょう
kiyomasa

2020/11/17 04:30

アドバイス、ありがとうございます。アコーディオン の定義を追加し、SCSSをCSSへ変更しました。
guest

回答1

0

ベストアンサー

とりあえずh4につけたクラスは「js_accordion_title」で
jsで参照しているのは「'.js-accordion-title'」なので
ハイフンとアンダースコアの違いがあります

投稿2020/11/17 04:29

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/11/17 04:30

「スペルミスはない」と思い込むのが一番危険です
yambejp

2020/11/17 04:37

参考までに <script> document.addEventListener("DOMContentLoaded",() => { document.querySelectorAll('.js_accordion_title').forEach(titleEach=>{ let content = titleEach.nextElementSibling; titleEach.addEventListener('click', () => { titleEach.classList.toggle('is-active'); content.classList.toggle('is-open'); }); }); }); </script> <style> .accordion_content{display:none} .accordion_content.is-open{display:block} </style> <section class="accordion"> <div class="accordion_container"> <h4 class="accordion_title js_accordion_title">Accordion Title1</h4> <div class="accordion_content"> Accordion Content 1 </div> <h4 class="accordion_title js_accordion_title">Accordion Title2</h4> <div class="accordion_content"> Accordion Content 2 </div> <h4 class="accordion_title js_accordion_title">Accordion Title3</h4> <div class="accordion_content"> Accordion Content 3 </div> </div> </section>
kiyomasa

2020/11/17 04:38

動きました。申し訳ありません。ありがとうございます。
kiyomasa

2020/11/17 04:40

参考もありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問