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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

js 開いたアコーディオンを閉じたい

ema-material
ema-material

総合スコア28

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

2回答

0グッド

0クリップ

299閲覧

投稿2023/03/07 04:40

表題の通りで、現在クリックすると開いたままのアコーディオンをクリックすると再度閉じたい

ここに実現したいことを箇条書きで書いてください。
-クリックすると開いたままのアコーディオンをクリックすると再度閉じたい

アコーディオンは開く状態である

ここに質問の内容を詳しく書いてください。
Q&Aの質問と回答のページを作っています。
どうぞよろしくお願いします。

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

再度クリックすると閉じるべきアコーディオンが閉じない

該当のソースコード

html

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 2 3 4<button class="accordion"><p> 5質問文 6</p></button> 7<div class="panel"><p> 8回答分<br> 9回答分<br> 10回答分<br> 11回答分<br> 12回答分 13</p></div>

css

1.accordion { 2 background-color: #FBF9F7; 3 cursor: pointer; 4 padding: 10px 20px; 5 width: 100%; 6 border: none; 7 text-align: left; 8 outline: none; 9 transition: 0.4s; 10 display: flex; 11 flex-wrap: wrap; 12 align-items: center; 13 gap: 10px 14} 15 16.accordion p { 17 flex: 1; 18 font-weight: 700 19} 20 21.accordion:before { 22 content: "Q."; 23 display: block; 24 font-size: 28px; 25 color: #00125E; 26 font-family: "Oswald", sans-serif 27} 28 29.accordion:after { 30 content: "筐�"; 31 display: block; 32 margin-left: auto; 33 transition: 0.2s 34} 35 36.accordion.active:after { 37 content: "筐�"; 38 transform: rotate(-180deg); 39 top: 25% 40} 41 42.accordion:hover { 43 background-color: #ccc 44} 45 46.accordion+.panel { 47 padding: 0 20px; 48 background-color: #FBF9F7; 49 max-height: 0; 50 overflow: hidden; 51 transition: max-height 0.2s ease-out; 52 display: flex; 53 flex-wrap: wrap; 54 align-items: start; 55 gap: 10px 56} 57 58.accordion+.panel:before { 59 content: "A."; 60 display: block; 61 font-size: 28px; 62 color: #DF0515; 63 padding-top: 15px; 64 font-family: "Oswald", sans-serif 65} 66 67.accordion+.panel p { 68 flex: 1; 69 padding: 20px 0 70}

js

1$('.accordion').on('click', function () { 2 var findElm = $(this).next(".panel"); 3 $(findElm).slideToggle(function () { 4 5 6 7 $(findElm).slideDown(500); 8 $(findElm)[0].style.maxHeight ="500px"; 9 $(findElm)[0].style.display = "block"; 10 }); 11});

試したこと

$(findElm).slideToggle(function () {

の次の行.close を付与するjsをいろいろ記載してみたのですが
うまくいきません。

cssは
.panel.close{
display:none;
height:0;
}
としました。

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

html css javascript

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

1

$(findElm).slideDown(500); $(findElm)[0].style.display = "block";

上記のjs(7行目と9行目)を削除したら閉じました。

投稿2023/03/07 05:12

doyuma

総合スコア66

ema-material👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

doyuma

2023/03/07 05:24 編集

解決できて良かったです。
ema-material

2023/03/07 06:30

追加で質問させてください。 二回クリックしないと開いたり閉じたりしないという指摘がありまして修正しています。 なぜ二回目のみのクリックが反映されるのでしょうか?
doyuma

2023/03/07 08:10 編集

個人的な見解ですが、jsにて「slideToggle」と「slideDown」の両方が記載されており、この2つを一緒に使うことで上記の不具合が発生している可能性があります。どちらか1つにする方が良いかと思われます。 参考に私が考えたコード修正案を記載します。こちらで1回のクリックで開閉できると思います。 【html】 <div class="panel">   ↓ <div class="panel none">に変更 【CSS】 下記2文を削除 ・max-height: 0; ・transition: max-height 0.2s ease-out; 下記文を.accordion+.panel{~}の次に追加 .accordion+.none { display: none; } 【JS】 下記3文削除 ・$(findElm).slideDown(500); ・$(findElm)[0].style.maxHeight ="500px"; ・$(findElm)[0].style.display = "block";

0

自己解決

その後自己解決しましたのでお知らせします。

投稿2023/05/02 00:36

ema-material

総合スコア28

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.83%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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