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

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

ただいまの
回答率

90.40%

  • PHP

    21891questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    9940questions

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

  • CSS

    6464questions

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

cssだけで開いたり閉じたりするアコーディオンを作る方法

解決済

回答 6

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,246

aba623ky

score 55

javascriptなしにcssだけでアコーディオンを作りたいです。
ドロップダウンメニューで作る事は可能ですが、このコードを元にアコーディオンを作成するにはどうしたらいいですか?
説明不足ですみません。

ラジオボタンを実装しましたが、下のようになりました。
ラジオボタンで表示非表示にしたかったのですが、そうなりませんでした。

イメージ説明

全体のコードを提示します。

echo '<table border="1">';
echo '<tbody>';       
   echo '<tr>';
   echo '<td  class="nav">';   
  echo '<input type="radio" name="ch" id="ch0" class="menu" checked>';
  echo '<input type="radio" name="ch" id="ch1" class="menu">';
  echo '<table border="1">';
  echo '<thead>';
  echo '<tr>';
  echo '<td>';
  echo '<label for="ch2" class="show">';
  echo 'menu2';
  echo '</label>';
  echo '<label for="ch0" class="hide">';
  echo 'menu2';
  echo '</label>';
  echo '</td>';
  echo '</tr>';
      echo '</thead>';
   echo '<tbody>';          
  echo '<tr>';
   echo '<td>';
   echo $r->access;
   echo '</td>';
   echo '</tr>';
       echo '<tr>';
    echo '<td>';
    echo $r->non_smoking;
    echo '</td>';
  echo '</tr>';   
   echo '</tbody>';   
   echo '</table>';
    echo '</td>';
   echo '</tr>';
   echo '</tbody>';      
     echo  '</table>';
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yambejp

    2016/10/03 16:56

    正直HTMLの質問に毎回むだなPHPを混ぜ込むのはやめてほしい、PHPに組み込むのはいつでもできるんだからHTMLの質問はHTMLとして書いてください

    キャンセル

  • aba623ky

    2016/10/03 16:59

    すみません。
    ちょっと応用したhtmlが使いたかったもので

    キャンセル

  • 退会済みユーザー

    2016/10/03 22:04

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

回答 6

+9

他の質問も確認しておもったのですが、ちゃんと回答者の意見を聞き入れて自分で改善してみてますでしょうか?
回答のやり取りを見てると自分が理解できないことは全部スルーしてわかることだけでものを作ろうとしている感じを受けます。
何かシステムを作ろうとしていることは感じとれるのですが、その全てをここで聞いて作ろうとしてませんか?
javascriptがわからないからCSSだけでやろうとしている感じがしてならないのですが、どうなんでしょうか?
たぶん実現したいことは世の中にいろんなサンプルがあるし、bootstrapのようなフレームワークを利用すれば簡単に実現できたりもしますし、何より回答者の方がきちんと回答してくれています。
先の回答にも書きましたが、まずはきちんとHTML、CSS、PHP、javascriptの勉強をしてください。
少なくとも回答者の言っていることを理解できないようでは、いくら質問しても意味がないですよ。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+4

いくつかの条件を受け入れられるのであれば、CSSでのclickへの対応は一応、不可能ではありません。

「一応」というのは、その条件が制約としてそこそこ厳しいものだからで、現実的あるいは実用的かと言われると、あまり自信はありません。

なお、これは方法論のみを示すものであり、提示されたソースについては一切考慮していません。

PHP(かな?)のソースだけ貼られても仕方がありませんし、構造から大きく変える必要があるため、提示されたソースに合わせて書くことができないからです。

 条件

  • :checked擬似クラスを使うため、ラジオボタンまたはチェックボックスを使用すること
  • 隣接セレクタを使うため、input要素と開閉する要素(あるいはその祖先要素)が同階層にあること
    (input要素は空要素なので、子孫に開閉する要素を置くことができません。)
  • height: auto;ではtransitionが効かないため、heightをあらかじめ計算しておくこと
    (transitionをmax-heightでやるという技はありますが、結局調整が要るため、手間はそんなに変わらないと思います。)
  • (ラジオボタンの場合)JavaScript無しにチェックを解除できないはずなので、現在開いている項目を再度クリックして閉じる、という操作ができないこと

 具体例

[name=accordion] {
  display: none;
}

[name=accordion] + label {
  display: block;
  cursor: pointer;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #ccf;
}

[name=accordion]:checked + label {
  background-color: #cfc;
}

[name=accordion] + label + ol {
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 0;
  list-style-type: none;
  transition: 1s ease;
}

[name=accordion] + label + ol li {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 50px;
  background-color: #fcc;
}

[name=accordion] + label + ol li a {
  display: block;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

#ac_menu1:checked + label + ol { height: 150px; }
#ac_menu2:checked + label + ol { height: 200px; }
#ac_menu3:checked + label + ol { height: 150px; }
<input type="radio" name="accordion" id="ac_menu1">
<label for="ac_menu1">menu1</label>

<ol class="ac_menu1">
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu1</a></li>
</ol>

<input type="radio" name="accordion" id="ac_menu2">
<label for="ac_menu2">menu2</label>

<ol>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu2</a></li>
</ol>

<input type="radio" name="accordion" id="ac_menu3">
<label for="ac_menu3">menu3</label>

<ol>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu3</a></li>
</ol>

 動作サンプル

https://jsfiddle.net/sii_side/kk8kteuf/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/03 15:45

    質問文を編集しました。
    今やったことを提示します。

    キャンセル

checkベストアンサー

+3

チェックボックスをおかないとできないですね
何度か例示しませんでしたっけ?

 修正

※ラジオボタン版に修正

input.menu{display:none;}
.nav input[type="radio"].menu + table tbody{display:none;}
.nav input[type="radio"].menu:checked + table tbody{display:table-row-group;}
.nav input[type="radio"].menu + table label.hide{display:none;}
.nav input[type="radio"].menu + table label.show{display:inline;}
.nav input[type="radio"].menu:checked + table label.hide{display:inline;}
.nav input[type="radio"].menu:checked + table label.show{display:none;}
<table border>
<tbody>
<tr>
<td  class="nav">
<input type="radio" name="ch" id="ch0" class="menu" checked>
<input type="radio" name="ch" id="ch1" class="menu">
<table border>
<thead>
<tr>
<td><label for="ch1" class="show">menu1</label><label for="ch0" class="hide">menu1</label></td>
</tr>
</thead>
<tbody>
<tr><td>data1</td></tr>
<tr><td>data2</td></tr>
<tr><td>data3</td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td  class="nav">
<input type="radio" name="ch" id="ch2" class="menu">
<table border>
<thead>
<tr>
<td><label for="ch2" class="show">menu2</label><label for="ch0" class="hide">menu2</label></td>
</tr>
</thead>
<tbody>
<tr><td>data1</td></tr>
<tr><td>data2</td></tr>
<tr><td>data3</td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td  class="nav">
<input type="radio" name="ch" id="ch3" class="menu">
<table border>
<thead>
<tr>
<td><label for="ch3" class="show">menu3</label><label for="ch0" class="hide">menu3</label></td>
</tr>
</thead>
<tbody>
<tr><td>data1</td></tr>
<tr><td>data2</td></tr>
<tr><td>data3</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/02 23:37

    例示しましたが、アコーディオンについては表示していません。ドロップダウンメニューは今まで表示してくれました。

    キャンセル

  • 2016/10/03 09:26

    accessをおしたらそれ以下のデータがついたり消えたりすればよいのでしょうか?
    追記確認してください

    キャンセル

  • 2016/10/03 11:14

    非表示表示が出来るアコーディオンが作りたいんです。

    キャンセル

  • 2016/10/03 11:40

    theadにメニューを置いて、tbodyを消してみました。
    こういうことですか?

    キャンセル

  • 2016/10/03 12:30

    https://jsfiddle.net/sii_side/kk8kteuf/
    こういうのです。

    キャンセル

  • 2016/10/03 13:15

    そのあなたが乗っけたURLにコードが載ってる。ほかの方が丁寧に解説してくれてる。ほかに何が必要なんですか?自分の作ったコードにそれを組み込んで作ってくれとでも言うんですか?ならお門違いです。あなたの求めるものがわかりません。

    キャンセル

  • 2016/10/03 13:36

    ・メニューを押すとひらく
    ・メニューを押すと閉じる
    ・メニューが開いているときに別のメニューを押すと、前のメニューが閉じてあたらしいメニューが開く

    という仕様でよいですか?
    修正版を上げておきました。ラジオボタンでやると良いです

    キャンセル

  • 2016/10/03 13:37

    ありがとうございます。
    yambejpさん、いつもすみません。

    キャンセル

  • 2016/10/03 15:44

    質問文を編集しました。
    今やったことを提示します。

    キャンセル

  • 2016/10/03 16:51

    まずテーブルの直前のラジオボタンのidがch1
    <input type="radio" name="ch" id="ch1" class="menu">
    なのに
    <label for="ch2" class="show">menu2</label>
    となっていてはch1はチェックできません。
    ラジオボタンのidとラベルのforを合わせてください

    それとスタイルシートはどうしました?ちゃんとCSSを
    <style>で渡すか外部ファイルで設定してありますか?

    キャンセル

  • 2016/10/03 16:56

    styleはちゃんと渡しました。
    labelをまた確認してみます。

    キャンセル

  • 2016/10/03 16:58

    <label for="ch1" class="show">menu2</label>
    が正解ですね。

    キャンセル

  • 2016/10/03 17:07

    あらたに例示いただいた画像ではラジオボタンが丸見えですが
    チェック用にあえて見せているという認識でよいですね?
    cssを適用すれば消えているはずなので・・・

    キャンセル

  • 2016/10/03 17:08

    ちなみに、わかっているとは思いますが、メニューを複数列記しないと
    他のメニューが隠れたりする部分はチェックできないですので留意ください

    キャンセル

  • 2016/10/03 18:37

    いいえ、コードを入れたら画像のように表示されました。

    キャンセル

  • 2016/10/03 18:47

    ではスタイルシートが正しく設定されていないですね
    PHPでソースを書いているのでどこかで凡ミスしているんじゃないでしょうか?
    スタイルシートに関する知識がないようであれば、単純に
    CSSで提示した私のソースを
    <style>~</style>で挟んでください

    <style>
    input.menu{display:none;}
    .nav input[type="radio"].menu + table tbody{display:none;}
    .nav input[type="radio"].menu:checked + table tbody{display:table-row-group;}
    .nav input[type="radio"].menu + table label.hide{display:none;}
    .nav input[type="radio"].menu + table label.show{display:inline;}
    .nav input[type="radio"].menu:checked + table label.hide{display:inline;}
    .nav input[type="radio"].menu:checked + table label.show{display:none;}
    </style>



    キャンセル

  • 2016/10/03 21:50

    ありがとうございます。
    あした試して見ます。

    キャンセル

+3

クリックで動作するという条件がある以上、
CSSだけでは作成不可能です。

https://teratail.com/questions/50001
ただし、代替方法については 先の質問に対して aKusano さんが回答してくれているのですから、回答を理解する努力をしてください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

マウスオーバーを利用したいんですかね
以下の様なものを見つけました
All CSS hover activated accordion with default state
※下の方にデモもあります

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/03 15:45

    質問文を編集しました。
    今やったことを提示します。

    キャンセル

0

結果
こういうのを作りたいんでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/03 07:41

    はい、おっしゃる通りです。

    キャンセル

  • 2016/10/03 08:29

    だったら前の質問のCSSだけでメニューが開いたり閉じたりするアコーディオンを作るを見てください。そこに答えが書いてあります。お望みのものが作れますよ。

    キャンセル

  • 2016/10/03 15:45

    質問文を編集しました。
    今やったことを提示します。

    キャンセル

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

  • PHP

    21891questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    9940questions

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

  • CSS

    6464questions

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