質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

2回答

2997閲覧

Wordpressの固定ページ内でCSSのみのアコーディオンを使いたい。

aikashinoda

総合スコア10

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2017/08/22 13:45

編集2017/08/23 09:46

###前提・実現したいこと

Wordpressの固定ページ内で以下のように表示させたい。

イメージ説明

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

<label for="label1">MORE</label>の部分をチェックしても中身のコンテンツが表示されません。 SafariとChromeのブラウザで試しましたがどちらもダメです。 しかし、ローカルであれば動作の問題はありませんでした。

###該当のソースコード

【HTML】 <body> <div class="accbox"> <!--ラベル1--> <label for="label1">MORE</label> <input type="checkbox" id="label1" class="cssacc" /> <div class="accshow"> <!--ここに隠す中身--> <div class="inner"> <div class="ytb"> <iframe src="https://www.youtube.com/embed/zBLBJtFPC-w" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> <div class="conts2"> <div class="title">名前*駅名<br>Natsumi Ota*Shioya Station</div> <div class="text">動画の説明やスポットの説明を入れる。動画の説明やスポットの説明を入れる。動画の説明やスポットの説明を入れる。</div> <button class="btn btn--stripe"> <a href="#">MORE</a> </button> </div> </div> </div> <!--//ラベル1--> </div> </body> =============================================== 【CSS】 /*ボックス全体*/ .accbox { margin: 0 auto; padding: 0; max-width: 100%;/*最大幅*/ } /*ラベル*/ .accbox label { display: block; margin: 1.5px 0; padding : 13px 12px; color: #ffba47; font-weight: bold; background: #fff2cc; cursor :pointer; transition: all 0.5s; text-align: center; } /*ラベルホバー時*/ .accbox label:hover { background :#ffe9a9;} /*チェックは隠す*/ .accbox input { display: none;} /*中身を非表示にしておく*/ .accbox .accshow { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s; } /*クリックで中身表示*/ .cssacc:checked + .accshow { height: auto; padding: 5px; background: #fff; opacity: 1; } .accbox .accshow p { margin: 15px 10px}

###試したこと
↓非表示に設定している部分↓
.accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
を手動で「height: auto;」と「opacity: 1;」に変更すると表示されました。
知識不足でどうすれば良いのやら。。。という状況です。

どなたかお力を貸していただけると幸いです。
よろしくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
https://saruwakakun.com/html-css/reference/accordion
のチュートリアルを参考に上記のソースコードを作成しました。

◆ 使用しているWPのテーマは http://design-plus1.com/tcd-w/tcd037 です。

情報不足な点があればコメントください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/08/22 14:10

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

回答2

0

ベストアンサー

固定ページ内であれば、全ての改行を外してみてください。改行を変換する際に想定されていないp要素が挿入されている可能性があります。

投稿2017/08/24 11:45

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aikashinoda

2017/08/28 11:23

先日はご回答ありがとうございます。 確かに想定されていないp要素が挿入されている箇所がありましたので、取り除かせていただきました。 しかし、一向に状況は変わらなかったため、onclick属性を直接htmlに入れる方法に変更いたしました。
guest

0

Wordpressを使用した事が無いので、的外れだったらスミマセン。コメント部分の開始直後と、終了直前に半角スペースを付けてみたらどうでしょうか?
/*○○○*//* ○○○ */ ブラウザー等の解釈にもよりますので、ローカルでは良いのかもしれません。

投稿2017/08/24 01:28

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aikashinoda

2017/08/28 11:24

先日はアドバイスありがとうございました。 上記の方法も試させていただきました。 しかし、一向に状況は変わらなかったため、onclick属性を直接htmlに入れる方法に変更いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問