wordpressの固定ページにてアコーディオンが正常に動作しません

wordpressサイトを構築しています。
page.phpを作成し、事前に作成しておいたhtmlをコピーし、固定ページの本文編集箇所に貼ったのですが、
htmlでは正常に動作するアコーディオンが開きません。

https://teratail.com/questions/165734
上記の記事に似たような質問があったのですが、解決策が書かれていませんでした。
またこちらの質問に対する回答にinputが消されるとの記載がありますが、
私の場合「クリック時に矢印のアイコンの向きを変える」という動作は正常に動いているので関係ないかと。

解決策が分かる方いましたら教えていただけないでしょうか。
よろしくお願いします。

html
1<div class="hidden-box">
2		<input type="checkbox" id="label1">
3		<label for="label1">
4			<p class="member-grade">タイトル</p>
5		</label>
6		<div class="hidden-show">
7			<div class="member-group-wrap">
8				<div class="member-group">
9					<div class="member-img">
10						<img class="mamber-face" src="image/itoh.jpg">
11						<div class="member-txt">
12							<p class="member-name">名前</p>
13							<div class="member-mail">
14								<p class="member-mail-txt">メールアドレス</p>
15							</div>
16						</div>
17					</div>
18				</div>
19			</div>
20		</div>
21	</div>

css
1.hidden-box label {
2	width: 80%;
3	height: 40px;
4	background-color: $sub-color1;
5	display: flex;
6	text-align: left;
7	margin: 0 auto;
8	margin-bottom: 48px;
9	font-size: var(--font-md);
10	cursor: pointer;
11	&:after {
12		content: "";
13		display: inline-block;
14		width: 1em;
15		height: 1em;
16		vertical-align: middle;
17		background: url(image/signal-white.svg) no-repeat;
18		background-size: contain;
19		margin-left: 0.5em;
20		
21	}	
22}
23
24/*アイコンを切り替え*/
25.hidden-box input:checked ~ label:after {
26	-webkit-transform: rotate(90deg);
27	transform: rotate(90deg);
28}
29
30/*チェックボックスを非表示*/
31.hidden-box input {
32	display: none;
33}
34
35/*中身を非表示*/
36.hidden-box .hidden-show {
37	height: 0;
38	overflow: hidden;
39	opacity: 0;
40}
41
42/*クリックで中身を表示*/
43.hidden-box input:checked ~ .hidden-show {
44	height: auto;
45	opacity: 1;
46	transition: 1.2s;
47}

行動規範の内容に同意します

回答2件

ワードプレスでｐタグが自動挿入されていませんか？
DevToolsでHTMLを確認してみてください。
（確認済みでしたらすみません。）

投稿2020/04/27 06:28

退会済みユーザー

総合スコア0

a-i.0

2020/04/27 07:13

pタグ自動挿入されていました。 functions.phpに追記して自動挿入されないようにしましたが、アコーディオンは開かないままです。

退会済みユーザー

2020/04/27 07:20 編集

吐き出されたHTMLが上記と同じで、 CSSがきちんと当たっていれば動きそうなのですが、他の箇所のCSSが干渉している等はなさそうですか？

a-i.0

2020/04/27 08:04 編集

</label>が下から１行目と２行目の間に移動していました。本文編集ページからhtmlを修正しましたが、勝手に移動してしまいます。本文を修正するだけじゃダメなのでしょうか？

退会済みユーザー

2020/04/27 08:35

勝手に移動することはないはずです。 DevToolsからではなく、右クリックで「ページのソースを表示」（Chromeの場合）でHTMLを見ても</label>の位置が変わっていますか？もし、そこでは正しいHTMLになっていれば、他の部分のHTMLに構文エラー（タグの閉じ忘れなど）があって、ブラウザが正常にHTMLを認識できていない可能性もあります。

a-i.0

2020/04/27 08:52

pタグを外したところ、正常に動きました。色々教えていただいてありがとうございました。

退会済みユーザー

2020/04/27 08:54

自動挿入ではなく書いていたpタグが原因だったのですね、、、動いてよかったです^^

行動規範の内容に同意します

ベストアンサー

label要素の中にp要素はHTMLの文法上入れられないので、p要素をはずしてみてはいかがでしょう。

【<label> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/label#Technical_summary

許可されている内容記述コンテンツ、ただし、子孫に label 要素を持つことはできない。そのラベルが示すもの以外のラベル付け可能コントロールを入れてはならない。

【#記述コンテンツ | コンテンツカテゴリー - 開発者ガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content

このカテゴリーに属する要素: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> および通常の文字列です（空白文字だけで構成されたものを除く）。