cssだけでクリック展開の仕組み

Question

.hidden_box{
display:inline-block;
margin:0;
padding:0;
}
/*ボタン装飾*/
.hidden_box label{
padding: 15px;
font-weight: bold;
border: solid 2px black;
cursor :pointer;
}
/*ボタンホバー時*/
.hidden_box label:hover{background: #efefef;}
/*チェックは見えなくする*/
.hidden_box input{display: none;}
/*中身を非表示にしておく*/
.hidden_box .hidden_show{
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show{
padding: 10px 0;
height: auto;
opacity: 1;
}

<div class="hidden_box">
<label for="label1">ボタンの名称</label>
<input type="checkbox" id="label1"/>
<div class="hidden_show">
文章文章文章文章。文章文章文章文章。文章文章文章文章。
文章文章文章文章。文章文章文章文章。
</div>
</div>

最初、[ボタンの名称]が黒い枠線で囲まれています。
で、クリックすると、枠線はそのままで、下に文章が表示されます。

しかし、クリックしたときに枠線が広がって[ボタンの名称]も含めて文章全体が囲まれるようになって欲しいのです。

ただ、枠線のサイズは、表示される文字をぴったり囲うようその時その時で大きさが変わるようにしたいのです。

説明不足でスイマセンでした。どうかよろしくお願いします。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[退会済みユーザー]

すいません、<code>のことを知りませんでした。教えてくれてありがとうございます、直しました！

Answer 1

こういうことでしょうか。

.hidden_box{
display:inline-block;
margin:0;
padding:0;
border: solid 2px black;/* ADD */
}
/*ボタン装飾*/
.hidden_box label{
display:inline-block;/* ADD */
/*border: solid 2px black;*//* DELETE */
padding: 15px;
font-weight: bold;
cursor :pointer;
}
```**動くサンプル：**[https://jsfiddle.net/rd2op9r5/](https://jsfiddle.net/rd2op9r5/)

Comments

[退会済みユーザー]

ああああ、あと1歩なんです！
クリック前の枠線が、ボタンの中の文字をちょうど囲うように可変的にしたいのです！　今のままだとムダに大きいので！

そのために
.hidden_boxのところにdisplay:inline-block;を自分で書き加えたのですが、ダメだったんです・・・。

隠れた文章の幅に合わされてしまうということなんでしょうか？

[kei344]

後から仕様が増えるようなので、仕様が固まってから質問文に追記してください。

Answer 2

あまり推奨はされませんが、こまかい微調整が必要なら
ボタンも含めて切り替えてしまえばどうでしょう

.hide_flg{display:none;}
.hide_flg+div{display:none;}
.hide_flg:checked+div{display:block;}

<div>
<input type="radio" name="c1" id="c1_1" class="hide_flg" checked>
<div>
<label for="c1_2">ボタンの名称</label>
</div>
<input type="radio" name="c1" id="c1_2" class="hide_flg">
<div>
<label for="c1_1">ボタンの名称</label>
<div class="hidden_show">
文章文章文章文章。文章文章文章文章。文章文章文章文章。
文章文章文章文章。文章文章文章文章。
</div>
</div>
</div>

追記

この辺が限界？

.hide_flg{display:none;}
.hide_flg+div{width:200px;border:1px dotted #000000;}
.hide_flg+div>div{display:none;}
.hide_flg:checked+div{width:400px;}
.hide_flg:checked+div>div{display:block;}

<input type="checkbox" id="c1" class="hide_flg" checked>
<div>
<label for="c1">ボタン1</label>
<div>
文章文章文章文章。文章文章文章文章。文章文章文章文章。
文章文章文章文章。文章文章文章文章。
</div>
</div>
<input type="checkbox" id="c2" class="hide_flg" checked>
<div>
<label for="c2">ボタン2</label>
<div>
文章文章文章文章。文章文章文章文章。文章文章文章文章。
文章文章文章文章。文章文章文章文章。
</div>
</div>

Comments

[退会済みユーザー]

ありがとうございます！
でも、ここではやっぱりこの形でいきたいんですよ(^^;

[yambejp]

どこまで構造をいじっていいかわからないのでできる範囲で追記しておきました

Answer 3

横幅が大きいのであればwidthも変更しては？
kei344氏のを拝借

/*中身を非表示にしておく*/
.hidden_box .hidden_show{
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  width:0;/*横幅をラベル以下にする*/
  transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show{
  /*padding: 10px 0;隙間はこれのせい*/
  height: auto;
  opacity: 1;
  width:100%;/*横幅を復活*/
}

Comments

[退会済みユーザー]

ありがとうございます！

ただ、閉じているときに、ボタン内の文字と枠の下辺との間に、1行分ほどの謎スペースが出来てしまいます。

試行錯誤してるときから悩まされているのですが、これの原因がどうもよくわからないんですよね

[sousuke]

padding消してもですか？

[退会済みユーザー]

/*padding: 10px 0;隙間はこれのせい*/

↑
これのことですよね？　はい。

[退会済みユーザー]

wordpressを使っているので、そのせいもあるのかな・・・なんかテキストの自動整形とかなんとか。

[sousuke]

https://jsfiddle.net/sousuke/rd2op9r5/1/
隙間に関してはここでも見えますか？

[退会済みユーザー]

見えない・・・完璧です！

ためしに、そのリンク先のコードを丸々コピペしてみましたが、やはり隙間が空いてしまうようです。

[sousuke]

文字の前に改行があるとかじゃないですかね。<br>とか

[退会済みユーザー]

<div class="hidden_box"><label for="label1">ボタン</label><input type="checkbox" id="label1"/><div class="hidden_show">文章</div></div>

上のように徹底的に詰めて書いてもダメでした・・・。
wordpressのテーマが良くないとかあるんですかね・・・？

[sousuke]

デベロッパーツールなどで何があるか見るしかないかと