cssのみで「続きを読む（もっと見る）」の実装で ショートコードを使わないと不具合が出ます

Question

cssのみで「続きを読む（もっと見る）」を実装 | キノコログ
https://kinocolog.com/css_readmore/
のサイトをみながら　CSS　をワードプレスに入れたいと思っています。

html が下記で

<div class="readmore">
    <input id="check1" class="readmore-check" type="checkbox">
    <div class="readmore-content">
        中身のテキスト
    </div>
    <label class="readmore-label" for="check1"></label>
</div>

CSSが下記です

    position: relative;
    box-sizing: border-box;
    /*以下お好み*/
    /* ボーダーを付ける場合 */
    padding: 10px;
    border: 1px solid #CCC;
}

.readmore-content{
    position: relative;
    overflow: hidden;
    /*以下お好み*/
    /*高さの初期値*/
    height: 100px;
}
.readmore-content::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
    height: 50px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
}

/* 続きを読むボタン */
.readmore-label{
    display: table;
    bottom: 5px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin: 0 auto;
    z-index: 2;
    padding: 0 10px;
    background-color: #ff7777;
    border-radius: 10px;
    color: #FFF;
}
.readmore-label:before{
    content: '続きを読む';
}

.readmore-check{
    display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}
.readmore-check:checked ~ .readmore-label:before{
    content: '閉じる';
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
    height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
    display: none;
}
コード

このコードを　html でそのままいれるやり方とショートコードで挿入するやり方が参考サイトで紹介されているのですが、

ショートコードを使わずに　html をいれたものが下記なのですが

html でいれたもの

続きを読むをクリックした後、続きを読むが消えません。

どうしたら、　続きをよむをクリックした後に　続きを読むボタンが消えるようになるのでしょうか？
スクロールしたときの動画
スクロールしたときの動画

ショートコードでいれたもの

上記のショートコードでいれたものはボタンを押したら消えます。

下記がショートコード化のソースです。

function readmoreSC($atts, $content = null){
	//1ページ内に複数回使う時のために、一意なIDを$READMORE_COUNTに入れる
	global $READMORE_COUNT;
	if(isset($READMORE_COUNT) || $READMORE_COUNT){
		$READMORE_COUNT++;
	}else{
		$READMORE_COUNT = 1;
	}
	$content = preg_replace('/^(<br />|<br>)/is', '', $content); //勝手に挿入されるbrタグを消す
	$html = '';
	$html .= '<div class="readmore">';
	$html .= '<input id="check'.$READMORE_COUNT.'" class="readmore-check" type="checkbox">';
	$html .= '<div class="readmore-content">';
	$html .= $content;
	$html .= '</div>';
	$html .= '<label class="readmore-label" for="check'.$READMORE_COUNT.'"></label>';
	$html .= '</div>';
	return $html;
}
add_shortcode('readmore', 'readmoreSC');

Answer 1

続きを読むをクリックした後、続きを読むが消えません。

下記にちゃんとコメントがあります。

.readmore-check:checked ~ .readmore-label{
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}

下記に修正すれば消えると思いますよ。

.readmore-check:checked ~ .readmore-label{
  display: none;
}

追記

上記の変更でもうまくいかないということなので、リンク先のソースをみてみました。
HTMLを参考先と変更してますね。

参考先のコード

<div class="readmore">
    <input id="check1" class="readmore-check" type="checkbox">
    <div class="readmore-content">
        中身のテキスト
    </div>
    <label class="readmore-label" for="check1"></label>
</div>

html でいれたもの のコード

<div class="readmore">
    <input id="check1" class="readmore-check" type="checkbox"><p></p>
    <div class="readmore-content">
        中身のテキスト  略
    </div>
    <p>
        <label class="readmore-label" for="check1"></label>
    </p>
</div>

label が pタグで囲まれてます。これがうまくいかない原因です。
pタグを削除するか、デザイン上必要なら、
CSSをセレクタを下記のように変更すればいいでしょう。

.readmore-check:checked ~ p .readmore-label{
  display: none;
}

Comments

[niconic73027793]

CSSを修正したのですが、消えませんね。
https://www.youtube.com/watch?v=Jcm9D3rcjsY
上記のように出てきます。
ショートコードなら　消えるんですが。

[hatena19]

ソースコードを読んでみて原因が分かりました。
回答に追記しておきましたので、ご参考に。

[niconic73027793]

ありがとうございます！
ワードプレスで自動挿入されたPタグが原因でした。
半日モヤモヤしていたのでスッキリしました<(_ _)>

[hatena19]

なるほど、ワードプレスだとそういうことがありますね。