CSSのみでアコーディオンメニューをつくりたい

Question

CSSのみでアコーディオンメニューを作成したいと考えていますが、思ったような形になりません。

こちらのページ(https://saruwakakun.com/html-css/reference/accordion#section3)における「応用例：矢印を表示&切替」と同様、Font Awesome 5 Freeのアイコンをラベルに表示させ、ラベルをクリックするとアイコンが切り替わってコンテンツが出現するようにしたいです。

現状

<div class="accbox">
    <input type="checkbox" id="label1" class="cssacc" />
    <label for="label1">あああ</label>
    <div class="accshow">
      <p>あああ</p>
    </div>
    <input type="checkbox" id="label2" class="cssacc" />
    <label for="label2">いいい</label>
    <div class="accshow">
      <p>いいい</p>
    </div>
    <input type="checkbox" id="label3" class="cssacc" />
    <label for="label3">ううう</label>
    <div class="accshow">
      <p>ううう</p>
    </div>
</div>

.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;
}

.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 10px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #003e9c;
    cursor :pointer;
    transition: all 0.5s;
}

.accbox label:before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 8px;
}

.accbox label:hover {
    background :#001f4d;
}

.accbox input {
    display: none;
}

.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

問題点・解決したいこと

• そもそもアコーディオンが機能しない、コンテンツが開かない(矢印は変化します)
• 最上部のラベルのみ文字が中央寄せになり、なおかつ文字の大きさも他のラベルとは異なってしまう
• ラベル間の高さを調整できない

---

基本的に参考サイトと同様にコーディングしましたが、アイコンが表示されなかったのでそのあたりだけを変更しています。

ご教授のほど、何卒よろしくお願いいたします。

Answer 1

そもそもアコーディオンが機能しない、コンテンツが開かない(矢印は変化します)

最上部のラベルのみ文字が中央寄せになり、なおかつ文字の大きさも他のラベルとは異なってしまう

ご質問者様のコードと同じものですが、機能するようです。
https://jsfiddle.net/4L7320rf/

つまり機能しない原因は他のところにあると思います。こちらで再現できる状態までなんとか頑張っていただければうれしいのですが。

---

ラベル間の高さを調整できない

上のリンク（つまりご質問者様のコード）の.accbox labelのmargin: 1.5px 0;をmargin: 30px 0;にすればできますので、これができない原因もご質問のコード以外にあると思います。

---

そもそもCSSを読んでないとか、他のCSSが影響しているのでは？開発ツール（F12）を開いて、該当のラベルとかに他のCSSが絡んでないか見てみてください。

Comments

[rntk]

早速のご回答をありがとうございます。
コード自体は機能するのですね。コードを確認できるサイトがあること自体知りませんでした。

他のCSSが絡んでいないか確認したいと思います。ありがとうございました。

[hotaruika]

????

Answer 2

Wordpressによってpタグが自動挿入されていたのが問題だったようです。

Wordpress上では、pタグは「あああ」等のクリック後に表示される文字列に対してのみ使用されていたので問題ないと思っていましたが、実際のページを開発者ツールで見てみると下記のようになっていました。

<div class="accbox">
	<input type="checkbox" id="label1" class="cssacc">
		<label for="label1">あああ</label>
		<p></p>
	<div class="accshow">
		<p>あああ</p>
	</div>
	<p>
		<input type="checkbox" id="label2" class="cssacc">
		<label for="label2">いいい</label>
	</p>
	<div class="accshow">
		<p>いいい</p>
	</div>
	<p>
		<input type="checkbox" id="label3" class="cssacc">
		<label for="label3">ううう</label>
	</p>
	<div class="accshow">
		<p>ううう</p>
	</div>
</div>

参照元によれば、コード中にbrタグやpタグが自動挿入されてしまうとアコーディオンが開かなくなってしまうようなので、これをどうにか解決したいと思います。

ご回答いただいたお二方、ありがとうございました。

Comments

[cofcof]

セレクタの +　は直後の要素に対しての指定なので、pが入ると動かなくなってしまいます。
~　を使用するとそれ以降の要素になるので、そのあたり修正しても動くかもしれませんね。

Answer 3

ちょっと書いてみました。
こんな形でいかがでしょうか。
section部分がアコーディオンで開く部分です。
当初はmax-heightを0かつoverflow-yをhiddenにしているので非表示、
チェックが入った場合のみ、最大の高さを100emに設定しています。
最低限の部分のみ記述しているので、適宜書き直していただければ良いかと思います。

<ul class="nav_ul">
  <li>
    <input type="checkbox" id="hd_01" class="hd_ac">
    <label for="hd_01">
      <h2>Menu</h2>
    </label>
    <section>
      <ul>
        <li><a href="#"><span>Menu2</span></a></li>
        <li><a href="#"><span>Menu2</span></a></li>
        <li><a href="#"><span>Menu2</span></a></li>
      </ul>
    </section>
  </li>
  <li>
    <input type="checkbox" id="hd_02" class="hd_ac">
    <label for="hd_02">
      <h2>Menu</h2>
    </label>
    <section>
      <ul>
        <li><a href="#"><span>Menu2</span></a></li>
        <li><a href="#"><span>Menu2</span></a></li>
        <li><a href="#"><span>Menu2</span></a></li>
      </ul>
    </section>
  </li>
</ul>

.hd_ac ~ section {
  background: #fff;
  max-height: 0;
  overflow-y: hidden;
  transition: 0.5s;
}
.nav_ul li .hd_ac:checked + label {
  background: #e5e5e5;
}
l.nav_ul li:hover label {
  background: #e5e5e5;
}
.hd_ac:checked ~ section {
  max-height: 100em;
  transition: 1s
}
.hd_ac {
  display: none;
}
.nav_ul li label::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  line-height: 1;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f054";
  transition: 0.2s;
  transform-origin: 0.5rem 0.25rem;
}
.nav_ul li .hd_ac:checked ~ label::before {
  transform: rotate(90deg);
}

Comments

[rntk]

ご回答ありがとうございます。
まだまだ知識不足ですが、ご回答いただいた内容をもとにしていろいろと書き直してみたいと思います。