横並びにした画像の中のボタンを押すと、テキストが表示されるようにしたい

Question

前提・実現したいこと

横並びにした画像の中のボタンを押すと、テキストが表示されるようにしたいです。
テキストの位置は、横並びの要素の外（下側の中央）に表示したいと思っています。

なかなかうまくいかないので教えていただけないでしょうか。

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

・画像の中のボタンを押すと、ボタン位置が上にずれてしまう。
・テキストが表示される位置が、要素外ではなく要素内（右側の画像の中）に偏ってしまう。

該当のソースコード

<div class="box-wrap">
<div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div><img src="http://placehold.jp/500x600.png">
<!-- クリック時のみ表示する領域 -->
<div class="hidden_box">
    <input type="checkbox" id="label1" />
    <label for="label1"></label>
    <div class="hidden_show">
<!--非表示要素ここから-->     
<p>テスト文章ですテスト文章ですテスト文章ですテスト文章ですテスト文章です</p>
</div>
<!--ここまで-->
</div></div>
<!-- / .box-wrap --></div>
</div>

.box-wrap {
	position:relative;
	max-width:1500px;
	width: 100%;
	text-align:center;
}
.box-wrap div {
	display:inline-block;
	width: 30%;
	margin: 0;
	padding:0;
	text-align:left;
}

/* */

.hidden_box {
	position:absolute;
	right: 40px;
	bottom: 30px;
	cursor :pointer;
}

.hidden_box label {
  width: 154px;
  height: 29px;
  background:url("http://placehold.jp/24/cc9999/993333/154x29.png") no-repeat center top;
  display: block;
}

/*ボタンを切り替え*/
.hidden_box input:checked ~ label {
  width: 154px;
  height: 29px;
  background:url("http://placehold.jp/24/000000/993333/154x29.png") no-repeat center top;
  display: block;
}

/*チェックは見えなくする*/
.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;
}

試したこと

・<label for="label1"></label>だけを右側の要素内に入れて、それ以外の非表示領域の設定はdisplay:inline-blockの外に出す。
非表示要素はちゃんと下に表示されるようになったが、.hidden_boxから無理矢理抜き出したためか、labelの切り替え設定が反映されなくなってしまった。

補足事項

要素の表示/非表示については、以下のサイトを参考にさせていただいています。
https://saruwakakun.com/html-css/reference/hidden-show#section3

Answer 1

box-wrap の外に出すのが手っ取り早そうですね。

<div class="box-wrap">
<div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div><img src="http://placehold.jp/500x600.png">
<!-- クリック時のみ表示する領域 -->
<div class="hidden_box">
    <label for="label1"></label>
</div></div>
<!-- / .box-wrap --></div>

<!-- なんか </div> がひとつ余ってたので消しました。 -->

<div class="hidden_box">
    <input type="checkbox" id="label1" />
    <div class="hidden_show">
<!--非表示要素ここから-->     
<p>テスト文章ですテスト文章ですテスト文章ですテスト文章ですテスト文章です</p>
</div>
<!--ここまで-->

このやり方だと、hidden_box に当ててるスタイルが効いてしまうので、CSSも少しいじる必要があります。

.box-wrap .hidden_box { /* ←ここ */
    position:absolute;
    right: 40px;
    bottom: 30px;
    cursor :pointer;
}

コメントを受けて追記

<input type="checkbox" id="label1" />
<div class="box-wrap">
<div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div><img src="http://placehold.jp/500x600.png">
<!-- クリック時のみ表示する領域 -->
<div class="hidden_box">
    <label for="label1"></label>
</div></div>
<!-- / .box-wrap --></div>

<!-- なんか </div> がひとつ余ってたので消しました。 -->

    <div class="hidden_show">
<!--非表示要素ここから-->     
<p>テスト文章ですテスト文章ですテスト文章ですテスト文章ですテスト文章です</p>
</div>
<!--ここまで-->

.box-wrap {
    position:relative;
    max-width:1500px;
    width: 100%;
    text-align:center;
}
.box-wrap div {
    display:inline-block;
    width: 30%;
    margin: 0;
    padding:0;
    text-align:left;
}

/* */

.hidden_box {
    position:absolute;
    right: 40px;
    bottom: 30px;
    cursor :pointer;
}

.hidden_box label {
  width: 154px;
  height: 29px;
  background:url("http://placehold.jp/24/cc9999/993333/154x29.png") no-repeat center top;
  display: block;
}

/*ボタンを切り替え*/
input:checked#label1 ~ .box-wrap label {
  width: 154px;
  height: 29px;
  background:url("http://placehold.jp/24/000000/993333/154x29.png") no-repeat center top;
  display: block;
}

/*チェックは見えなくする*/
input#label1 {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
input:checked#label1 ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

Comments

[mupo]

教えていただいてありがとうございます！
上の通りにやってみたら表示位置は大丈夫になったのですが、
「.hidden_box label 」と「.hidden_box input:checked ~ label」で指定している
画像の切り替えが無効になってしまいまして、正常に表示する方法はありますか…？
（「.hidden_box label 」ではなく「.box-wrap .hidden_box label」にしたりしてみたのですが、効きませんでした）
教えていただけると嬉しいです。

[Lhankor_Mhy]

なるほど。では、input を box-wrap の手前に置くのはどうでしょうか？

[mupo]

上手くいきました！
こういう風にすればいいんですね、理解できてとてもスッキリしました。
このたびはご教授ありがとうございました！