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

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

ただいまの
回答率

90.33%

  • JavaScript

    17587questions

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

  • HTML

    9614questions

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

  • CSS

    6226questions

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

  • HTML5

    4318questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

素のjavascriptでアコーディオンを作るにはどうすればいいでしょうか?

受付中

回答 6

投稿

  • 評価
  • クリップ 1
  • VIEW 876

anAnonymous

score -12

素のjavascriptでアコーディオンを作るにはどうすればいいでしょうか?
jQueryは使えません
簡単な雛形をくだされば助かります

今のところ
document.getElementById("").style.display = "blcok";
でやろうとしてますができません
クリックするとdlごと消えます

aタグが必要なんでしょうか?
よろしくおねがいします

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/05 11:20

    質問本文に要件と試したことを具体的に記載してください

    キャンセル

  • mts10806

    2018/07/05 11:21 編集

    ご理解されてないようですが丸投げ質問は非推奨です。 https://teratail.com/help/avoid-asking >コードをください・デバッグしてください等の丸投げの質問

    キャンセル

  • 退会済みユーザー

    2018/09/05 13:00

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 6

+8

とりあえず

[name=m]{display:none;}
[name=m]:not(:checked)+ul{display:none;}
<form>
<ul id="menu">
  <li><label for="m1">1</label><input type="radio" name="m" id="m1">
  <ul>
    <li>1-1</li>
    <li>1-2</li>
    <li>1-3</li>
  </ul>
  </li>
  <li><label for="m2">2</label><input type="radio" name="m" id="m2">
  <ul>
    <li>2-1</li>
    <li>2-2</li>
    <li>2-3</li>
  </ul>
  </li>
  <li><label for="m3">3</label><input type="radio" name="m" id="m3">
  <ul>
    <li>3-1</li>
    <li>3-2</li>
    <li>3-3</li>
  </ul>
  </li>
</ul>
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/05 11:32

    > あなたが思うアコーディオンメニューの作り方

    質問者が思考停止している状態だと正直なにを書いても
    無駄な気がします、いちおう回答はつけますけどね
    どうせ「これじゃない」的なあとだしがあるんでしょうけど

    キャンセル

  • 2018/07/05 11:39

    この手の質問は懸念されてる通り回答者側のストレスになることもあるので
    私はよくスルーしてます。
    丸投げ質問にならないように追記修正依頼にコメントしてるんですが、応じてもらえない場合は大体そんなです。

    キャンセル

  • 2018/07/05 11:42

    css 芸すごい…

    キャンセル

  • 2018/07/05 11:44

    実際のところ質問者はヒントがほしいのでもましてや
    説教がほしいのでもないのはわかっているので
    とりあえず無駄だとわかっていながら回答はします
    自称、日本一のお節介プログラム愛好家なので

    キャンセル

  • 2018/07/05 11:57 編集

    > 自称、日本一のお節介プログラム愛好家なので
    「要件さえ分かれば後は何とかなる」というところ見習いたいです。
    私は質問関係なくyambejpさんの回答のコードで勉強になってます。

    キャンセル

+5

 雛型

簡単な雛形をくだされば助かります

昔、作ったライブラリならあります。
http://vird2002.s8.xrea.com/test/accordion.html
attachEvent のラップ処理、forEach のPolyfillから当時の考えが見えますね。

aタグが必要なんでしょうか?

:target 疑似クラスを利用するのなら、そうですね。

今修行させられてます。自分としてはうまくいく予定で

他人のサンプルコードを提出するのはやめた方が無難です。
ぐぐればすぐにバレますし、コードの理解度チェックされて答えられなければ終わりです。

 修業の為なら

いやいや他人のコードを提出なんて考えていませんよ。

「雛型」を希望したところから、他人のコードで提出することを連想しました。
少しコードを書き換えるだけで作れる出来合いのものを求める他の意図を、私は説明できません。

少なくとも、私は修業の為ならコードよりも解法を求めます。
コートを貰ってしまうと、自分の発想でアルゴリズムを考える機会を失います。

そして、何より課題の提出なら、今までに習った内容の復習が意義なので、見知らぬ他人の書いたコードを出せば「今までに習った内容」が含まれないかもしれません。
そうなれば、出題者に「何を聞いてたの?このコードはどこから出てきたの?」と質問を返されることは容易に想像できます。

正しいアプローチは次のようになると思います。

  1. 今までに習った内容を踏まえてコードを書いてみる
  2. 分からなければ、コードを基礎的な要素別に分解して、ミニマムコードで検証する
  3. それでも、分からなければ、ミニマムコードを元に質問する

ここで重要なのは、「習った範囲」でコードを書くことです。
基本的には、背景を全て知っている師に答えを求めるべきだと私は思います。

Re: anAnonymous さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/05 13:10

    > 他人のサンプルコードを提出するのはやめた方が無難です。
    ぐぐればすぐにバレますし、コードの理解度チェックされて答えられなければ終わりです。

    ここ気づかなかった。赤の他人にコード書かせて自分の課題提出のためにあてようという魂胆があったんでしょうね。
    まさにavoid-asking。

    キャンセル

  • 2018/07/05 14:09

    いやいや他人のコードを提出なんて考えていませんよ。

    キャンセル

  • 2018/07/05 14:12 編集

    修行の割りに丸投げというところでそういう印象を与えてしまっています。

    https://teratail.com/help/question-tips#questionTips1-1
    >あなたがそのようなつもりで質問しているのだと他のユーザーから誤解されないように、丁寧な質問を心がけましょう。

    キャンセル

  • 2018/07/05 20:03

    To: anAnonymous さん
    親記事に追記しました。

    > いやいや他人のコードを提出なんて考えていませんよ。
    「雛形」を求めたのはなぜなのでしょうか。
    「解き方」ではなく、「雛形」を優先する理由はありますか。

    キャンセル

  • 2018/07/06 12:56

    その質問はこのサイトに関係ないですよね。今後答えませんが一度だけ答えるとすれば写経すれば身につくからです。わからない部分はまた質問すればいいので。意識高い系の方々にはウケが悪いみたいですね。尊敬します。

    キャンセル

  • 2018/07/06 12:58 編集

    なお上記答えへの返信は不要です。今後回答する気があるならする、ないならひっこんでいろ、もしあなたに管理者権限があるなら別ですが笑

    キャンセル

  • 2018/07/06 13:02

    ルール守らない人に意識高いも低いもないですね。ただの無法者です。そりゃまともな回答がつかなくて当然です。他所へどうぞ。

    キャンセル

  • 2018/07/06 20:14

    コードを出した後の第一声が「いやいや他人のコードを提出なんて考えていませんよ。」
    「aタグが必要なんでしょうか?」に回答しても無反応。
    その後も音沙汰なしですから、アドバイスしようがないですね。
    そもそも、コードなら検索すればいくらでも見つかるわけですから、詰まっている部分を確認した上で要所を抑えた質問をすべきでしょう。
    「意識低い系」かつ「モラル低い系」というところでしょうか(独り言なので返信不要)。

    キャンセル

  • この投稿は削除されました

  • 2018/07/07 18:33

    まずは質問したり回答に対して上から目線で評価したりグチグチ言う前にこちらを読むところからどうぞ。
    https://teratail.com/help/question-tips

    キャンセル

  • 2018/07/07 18:45 編集

    To: anAnonymous さん
    ここは質問に回答するサイトです。
    質疑応答は後々同じ問題にあった人が参考にする知見となるので、回答を貰ったら「解決した」「~までできたが、~は出来なかった」「~がわかったが、~がわからなかった」などなど、後々の人が参考にする情報を残すサイトです。公式にもそう書かれています。
    https://teratail.com/help/question-tips#questionTips4-2
    あなたは回答の「内容」に対して、何の反応も返さなかった。それだけの話です。

    > 人生へのアドバイスをするサイトじゃない
    サイトの意義を元に反論するなら、サイト内のルールは徹底して読むべきです。
    https://teratail.com/help/avoid-asking
    https://teratail.com/help/question-tips
    あなたはmts10806さんが紹介して下さった事に対して「あなたはテラテイルの運営の方なんですか?」と反論していますが、運営ではないあなたが「人生へのアドバイスをするサイトじゃない」といっているのは自己矛盾です。

    キャンセル

+4

こういう質問って回答しないほうが teratail 的にいいんでしょうか。

https://codepen.io/og24715/pen/JZqWRr?editors=1010

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/05 11:19

    基本的に低評価つけるか、質問を充実してもらうべく指摘という形で良いかと。
    回答しちゃダメということではないですが、丸投げ質問にそのままコードで答えるのは本人の今後のためにならないという考え方もあります。

    https://teratail.com/help/avoid-asking
    >問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。

    キャンセル

  • 2018/07/05 11:36

    > 丸投げ質問にそのままコードで答えるのは本人の今後のためにならないという考え方もあります。
    魚の取り方を教えよってやつですね。よくわかります。

    キャンセル

  • 2018/07/07 18:18

    あなたはテラテイルの運営の方なんですか?
    質問に対する回答をする気があるならする、ないなら黙っているのが一番テラテイルの為になっていますよ。
    現に有意義な回答が来てるじゃないですか。
    写経の効果について勉強してください。理解出来ないなら今後写経を試みようとしている質問者の質問はスルーしてください。
    あなたのような人がいるからweb界隈が気持ち悪がられるんです

    キャンセル

  • 2018/07/07 18:36

    teratailの使い方にそって使っているだけですが・・・?
    https://teratail.com/help/question-tips

    分からないなら分からないと言えばいいだけでは?
    過去にも「teratail」というタグ付けで主に質問されているような方から質問が上がっていたり、主に回答されているような方から質問が上がっています。
    その辺りちゃんと読んだ上で今のキャラでいこうとしてるならあなたが追い出されるだけですよ。

    キャンセル

+3

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

回答ではないです。今でているものに対しての指摘です。

document.getElementById("").style.display = "blcok";
  • IDの指定何もしていない
    →HTMLでも提示があればまだまともな回答の余地はあるんですが
  • blcokなんて指定は存在しない。 CSS:display blockです。スペルミスです。

aタグが必要なんでしょうか?

それは分かりません。如何様にも組めます。

そもそも逆に聞きたい。
質問者さんはjQuery使えば組めるんですか?

この短い質問内容だけで全て判断できるわけではないですが、
jQuery使ってもとても組めるようには思えません(失礼は承知です)

例で結構です。
jQueryで組んだコードを質問に追記してみてください。
jQueryはJavaScriptのライブラリです。内部的にはJavaScriptがガンガンに動いています。
もしjQueryで組むことができるのでしたら、それぞれ置き換えれば良いだけですよね?

なので、「勉強のためにjQueryではなくJavaScriptで組む」という練習されているのでしたら
まずjQueryで組んで出来た物に対して少しずつ変換していく というやり方が最も理にかなっています。

逆も然りです。JavaScriptで組めればjQueryでも組めます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/06 13:03

    jqueryはできませんが以前やったことがあって思い出すほうが楽だろうなと思っただけです。jqueryの仕組みまでわかって初めてわかったと言えるんだというなら一理ありますね。とりあえず上記のスペルミスの指摘感謝します。しかしそれ以外は余計でしたね。

    キャンセル

  • 2018/07/06 13:16

    冒頭に直接の回答でないことは明記しています。
    anAnonymousさんは回答者を評価できるほどの質問内容を組めていません。
    無法者であることはこれまでのコメントで見ている人に伝わったと思うので、同等の質問を繰り返すようであればまともな回答がつくことは今後期待できません。
    最低限下記は読んでteratailを利用してください。
    https://teratail.com/help/question-tips
    https://teratail.com/help/avoid-asking

    現時点で低評価が10ついていますね。それがどういうことかを考えてみると良いです。

    キャンセル

  • 2018/07/06 18:24

    冒頭に断りがあるからなんなのか分からないんですがいらないこと書くの本当辞めてもらっていいですか?通報しますよ。

    キャンセル

  • 2018/07/06 19:04

    必要なことを書いてないご自身の質問内容を省みるのが先かと思いますが、ご自由にどうぞ。

    キャンセル

-3

こんばんは

これほど低評価がいっぱいついた回答初めてみました、、、

私も現在アコーディオンに挑戦中なので一緒に頑張りましょう!

「js アコーディオン」で検索すればサンプルがいっぱいでてきます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • JavaScript

    17587questions

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

  • HTML

    9614questions

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

  • CSS

    6226questions

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

  • HTML5

    4318questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。