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

Question

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>';

Comments

[toutou]

アコーディオン cssで検索し一通りやってみてください。それを応用してコードを書き直してください。それでもわからなかったら、具体的にどこの部分がわからなかったを聞かないと、答える側もつらいと思います。

[date]

javascriptを使わずにという理由は説明した方がいいですよ。

[yambejp]

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

[aba623ky]

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

Answer 1

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

Answer 2

いくつかの条件を受け入れられるのであれば、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/

Comments

[aba623ky]

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

Answer 3

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

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

Answer 4

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

修正

※ラジオボタン版に修正

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>

Comments

[aba623ky]

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

[yambejp]

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

[aba623ky]

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

[yambejp]

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

[aba623ky]

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

[toutou]

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

[yambejp]

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

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

[aba623ky]

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

[aba623ky]

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

[yambejp]

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

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

[aba623ky]

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

[aba623ky]

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

[yambejp]

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

[yambejp]

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

[aba623ky]

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

[yambejp]

ではスタイルシートが正しく設定されていないですね
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>

[aba623ky]

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

Answer 5

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

Comments

[aba623ky]

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

Answer 6

こういうのを作りたいんでしょうか？

Comments

[aba623ky]

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

[toutou]

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

[aba623ky]

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