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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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

解決済

2回答

2855閲覧

中の一部が見えるアコーディオンの作り方

guranola

総合スコア13

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で作成されています。

0グッド

1クリップ

投稿2018/09/13 05:35

編集2018/09/13 09:14

前提・実現したいこと

webページでアコーディオンを使った項目を実装したいのですが、
最初の段階で中のdd に該当する部分が4、5行ほど見れてdt 同様クリックすることでアコーディオン内全体が見れるような形にしたいのですが、サンプルを探してもなさそうでしたのでご教授いただけませんか?

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

エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Accordion</title> <style type="text/css"> <!-- *{ margin:0; padding:0; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; } dl{ width: 760px; margin: 50px auto; } dt{ font-weight: bold; border-bottom: 1px solid #FFFFFF; cursor: pointer; padding: 8px 8px 8px 12px; color: #FFF; background-color: #b2d2ea; } dd{ border: 1px solid #b2d2ea; border-top: none; height: 400px; padding: 12px; } #detail{ float: left; width: 730px; height: 180px; background-color: #ff7f50; } #introduction{ float: left; width: 730px; height: 180px; margin-top: 30px; background-color: #d3d3d3; } --> </style> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ $("dl dd").hide(); $("dl dt").click(function(){ $("dl dd").slideUp(); if($("+dd",this).css("display")=="none"){ $("+dd",this).slideDown(); } }); }); </script> </head> <body> <div id="container"> <dl> <dt>項目1</dt> <dd> <div id="detail"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div id="introduction"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </dd> <dt>項目2</dt> <dd> <div id="detail"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div id="introduction"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </dd> </dl> </div> </body> </html>

試したこと

ここに問題に対して試したことを記載してください。

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

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

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

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

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

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

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

rina

2018/09/13 08:44

できればHTMLも記載お願いします。
kei344

2018/09/14 16:10

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答2

0

ベストアンサー

色々コードいじっちゃったけど、こんな感じでmaxheightをいじるとできるんじゃねえかな?
jQueryを使わずともすべてCSSでかけるが、それは今回の質問とはそれてくるので省略

HTML

1<div id="container"> 2 <dl> 3 <dt>項目1</dt> 4 <dd> 5 <div class="box"> 6 <div class="detail"> 7 <h2>タイトル</h2> 8 <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> 9 </div> 10 <div class="introduction"> 11 <h2>タイトル</h2> 12 <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> 13 </div> 14 </div> 15 </dd> 16 <dt>項目2</dt> 17 <dd> 18 <div class="box"> 19 <div class="detail"> 20 <h2>タイトル</h2> 21 <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> 22 </div> 23 <div class="introduction"> 24 <h2>タイトル</h2> 25 <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> 26 </div> 27 </div> 28 </dd> 29 </dl> 30</div>

CSS

1* { 2 margin: 0; 3 padding: 0; 4 font-family: "Hiragino Kaku Gothic Pro", 5 "ヒラギノ角ゴ Pro W3", 6 Meiryo, 7 "メイリオ", 8 Osaka, 9 "MS P Gothic", 10 "MS Pゴシック", 11 sans-serif; 12} 13 14dl { 15 width: 760px; 16 margin: 50px auto; 17} 18 19dt { 20 font-weight: bold; 21 border-bottom: 1px solid #FFFFFF; 22 cursor: pointer; 23 padding: 8px 8px 8px 12px; 24 color: #FFF; 25 background-color: #b2d2ea; 26} 27 28dd { 29 border: 1px solid #b2d2ea; 30 border-top: none; 31 padding: 12px; 32} 33 34.box { 35 height: inherit; 36 max-height: 5em; 37 overflow: hidden; 38 transition: all .3s linear 0s; 39} 40 41.box-expanded { 42 max-height: 400px; 43} 44 45.detail { 46 float: left; 47 width: 730px; 48 height: 180px; 49 background-color: #ff7f50; 50} 51 52.introduction { 53 float: left; 54 width: 730px; 55 height: 180px; 56 margin-top: 30px; 57 background-color: #d3d3d3; 58}

jQuery

1$(function () { 2 $("dt").on("click", function () { 3 $($(this).next("dd").find(".box")[0]).toggleClass("box-expanded"); 4 }); 5});

投稿2018/09/13 11:14

bwz61366

総合スコア2009

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

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

guranola

2018/09/14 05:10

自身が思っていたつくりに近い動きで、とても参考になりました! ありがとうございます!!
bwz61366

2018/09/14 15:04

あー、解決したなら解決済みにしといてくれ してないなら何がダメかいわないと後続の回答者も戸惑うぞ
guest

0

一つのdl内にdtやddはいくつくらいある想定でしょう?
とくにdtが複数ある場合は書き方が変わってきます
とりあえず1つでいいなら

javascript

1<script> 2$(function(){ 3 $('dt').on('click',function(){ 4 $(this).siblings('dd:gt(3)').toggle(); 5 }).trigger('click'); 6}); 7</script> 8<dl> 9<dt>aaaa</dt> 10<dd>aaaa1</dd> 11<dd>aaaa2</dd> 12<dd>aaaa3</dd> 13<dd>aaaa4</dd> 14<dd>aaaa5</dd> 15<dd>aaaa6</dd> 16<dd>aaaa7</dd> 17<dd>aaaa8</dd> 18<dd>aaaa9</dd> 19</dl> 20<dl> 21<dt>bbbb</dt> 22<dd>bbbb1</dd> 23<dd>bbbb2</dd> 24<dd>bbbb3</dd> 25<dd>bbbb4</dd> 26<dd>bbbb5</dd> 27<dd>bbbb6</dd> 28<dd>bbbb7</dd> 29<dd>bbbb8</dd> 30<dd>bbbb9</dd> 31</dl>

投稿2018/09/13 08:55

yambejp

総合スコア114574

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

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

bwz61366

2018/09/13 11:20

これ、ひとつのdd要素がめっちゃ長いときとかもそのまま3つのdd要素を表示しちゃうし、「もっと読む」的なやつには向いていないんじゃ?っつーのは触れちゃいけないところか
guranola

2018/09/14 05:14

中にどれだけのコンテンツが入るかまだ決めていませんが、仕組み的にはわかりやすくて参考になります! ありがとうございます!!
yambejp

2018/09/14 05:26

そもそもこれって「もっと読む」の機能なんですか? もっと読むを定義リストで行うというのはいささか的外れだと思いますが・・・
bwz61366

2018/09/14 15:27 編集

>もっと読むを定義リストで行うというのはいささか的外れ どうして?きになる。
yambejp

2018/09/14 16:07 編集

もっと読むなら常識的に長い文章でしょ 普通なら直感的にはPタグだよね むしろ定義リストをどうしてもっと読むと 思ったのかを教えてほしいくらい、気になる
bwz61366

2018/09/14 17:30

>もっと読むなら常識的に長い文章でしょ >普通なら直感的にはPタグだよね dd要素に”説明として”長い文章が入ってるなら、的外れとまではいかないかなーとおもったりする。 もし段落にしたいなら、dd要素のなかでp要素とか使ってその長い文章をかこっちゃえばいくない?だめかな?きになる。 >むしろ定義リストをどうしてもっと読むと >思ったのかを教えてほしいくらい、気になる 説明リストを使っているかどうかっつーより、 アコーディオンで4,5行見れるようにって質問に書いてあるし、そうかなーって思っただけ。 もしかしてこれがエスパーってやつかな?違うか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問