プロが教える店舗＆オフィスのセキュリティ対策術

中に<table></table>が使えるアコーディオンを教えて下さい。

解決済

  • 質問者：kairos355
  • 質問日時：
  • 回答数：6件

htmlで料金メニューを作成しております。

大項目として7つぐらいの項目があり、それぞれに複数の「料金メニュー」「価格」「説明」等があります。
大項目にアコーディオンを使い、選択した時だけ料金メニューのtableを表示したいのですが、なかなか良い方法が見つかりません。

良くあるアコーディオンは、リスト（<li>）であったり、テキスト（<p>）の場合なら問題ないのですが、テーブルとなるとうまくうごくものが見つかりません。

どうかアドバイスや、参考になるページを教えて下さい。
よろしくお願いいたします。

質問者からの補足コメント

  • 動きとしては、参考URLのようにしたいのですが、pタグだと動くのですが、tableタグを入れるとうまくうごきません。
    参考：http://www.cloudot.co.jp/demo/201607/

      補足日時：2017/01/12 17:44
    通報する

  • テーブルのソース一部を入れさせて頂きます。
    どうぞよろしくお願いいたします。

    <table class="price-table">
    <tbody>
    <tr class="line">
    <td width="120">ファイリング</td>
    <td width="70">10本</td>
    <td width="50" align="right">700円</td>
    <td>爪の長さや形を整えます。</td>
    <td width="60" align="right">15分</td>
    </tr>
    </tbody>
    </table>

      補足日時：2017/01/13 08:39
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

示されたサイトはjavascriptを使用しています。


　私は通常はjavascriptはブロックしていますので、広がらなかったけど、サイトのjavascriptを許可して初めて動作した。---今は私のようにデフォルトではjavascriptを禁止しているユーザーも多いので、この方法は良くありません。
　また、
＞大項目にアコーディオンを使い、選択した時だけ料金メニューのtableを表示したいのですが、
＞良くあるアコーディオンは、リスト（<li>）であったり、テキスト（<p>）の場合なら問題ないのですが、
　これも、誤解されています。
　普段は、display:none、ないしheight:0pxで、その要素が指定されると、display:block | table なりにすればよいことです。また、ゆっくり開きたいならtransitionを使えばよい・・
　もちろん、リストだろうがtableだろうが関係ないですし、リストとしてマークアップされているものをtableとして表示するのも、tableとしてマークアップされているものをリストとして表示するのも、スタイルシートを使えば簡単にできる。
　また、tableなどのソースがわからないと、作れないわけでもありまません。構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )は、20年前のHTML4.01の勧告以来、ウェブの基本ですからね。プレゼンテーション(表現)は、文書構造とは別の問題ですからね。(^^)

★あなたの間違いは、「良くあるアコーディオンは、・・・テーブルとなるとうまくうごくものが見つかりません。」と、完成品を探してそれを使おうとするからです。
　数学の勉強と同じで、問題集から同じような問題を解いて解き方を流用しようとするから伸びない。数学なんて、基礎からキチンと理解していけば、あれほど簡単でちょろい科目はないでしょ。小学生だって数検２級とか１級がとれる。

要は、
・その要素を条件によって「隠したり表示する」あるいは「小さくしたり大きくしたり」すばよい
　使えるプロパティは、displayか、transition、
　要素の指定は、動的な疑似クラスを使えばよい。

ごく簡単なサンプル
★タブは＿に置換してある
★alignやwidth属性はHTMLの属性ではなく、スタイルシートで指定しましょう。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">
<!--
section table{width:800px;border-collapse:collapse;}
section table caption{
text-align:left;
}
section table caption a{
text-decoration:none;
font-weight:bold;
font-size:1.2em;
}

section table tbody{
transition-property: line-height color;
transition-duration:2s;
transition-timing-function:ease-in-out;
color:rgb(255,255,255);
line-height:0;
}
section table tbody:target{
display:table-row-group;
color:rgb(0,0,0);
line-height:1.6em;
}
section table tbody:target th,
section table tbody:target td{
border:1px solid black;
}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>価格一覧</h2>
＿＿<table>
＿＿＿<caption><a href="#filing">ファイリング1</a></caption>
＿＿＿<tbody id="filing">
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿＿<table>
＿＿＿<caption><a href="#filing2">ファイリング2</a></caption>
＿＿＿<tbody id="filing2">
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th>ファイリング</th>
＿＿＿＿＿<td class="number">10本</td>
＿＿＿＿＿<td class="price">700円</td>
＿＿＿＿＿<td class="comment">爪の長さや形を整えます。</td>
＿＿＿＿＿<td class="time">15分</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
    • good
    • 2
    • 件
通報する
この回答へのお礼

ありがとうございます！
おっしゃる通り基礎の勉強が重要だと痛感しました。
アドバイスありがとうございます。

通報する
お礼日時：2017/01/13 17:44

No.5

  • 回答者： fujillin
  • 回答日時：

ANo2です。


試してみましたが、動作するようですよ。

ただし、table要素を直接アニメーションしようとしても、高さ指定ではうまく制御できないために見かけ上は切替え表示のようになってしまうようですね。

ご質問の意味が、アニメーションが上手くいかないということでしたら、tableを他のブロック要素（divなど）で包含させておけば、アニメーションも問題なく動作するようになります。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます！
ご指摘の部分が間違っていたようです。もう少し基礎を勉強します！

通報する
お礼日時：2017/01/13 17:45

No.4

  • 回答者： yambejp
  • 回答日時：

例示いただいたテーブルは１行しかないのでアコーディオン処理は無理では？


またテーブルを例示いただくのとあわせてどこをクリックするとどう広がるという
仕様の提示も必要です
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
解決しました。皆様ご親切にして頂き助かりました。

通報する
お礼日時：2017/01/13 17:46

No.3

  • 回答者： yambejp
  • 回答日時：

例示のサイトをみても具体的にどんなテーブルかわかりかねますが


テーブル自体を例示していただけない限り、適切な回答はつかないでしょう
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。テーブルのソース一部を補足させていただきました。
よろしくお願いいたします。

通報する
お礼日時：2017/01/13 08:40

No.2

  • 回答者： fujillin
  • 回答日時：

作成なさっている文書の構成がよくわかりませんが…



リストの内容として、それぞれの表(table）を記す構成にしておけばよいのでは？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
言葉足らずで申し訳ありません。補足に入れさせて頂きました。
よろしくお願いいたします。

通報する
お礼日時：2017/01/12 17:44

No.1

  • 回答者： yambejp
  • 回答日時：

具体的なテーブルを例示してください

    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。テーブルのソース一部を補足させていただきました。
よろしくお願いいたします。

通報する
お礼日時：2017/01/13 08:40

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報