CSSのみのアコーディオンメニューに、別途「閉じる」の表示を付けてそこを押してもメニューを閉じたい

タイトル通りではありますが、サイトを参考にアコーディオンメニューを作成しました。

アコーディオンメニューを開くと、写真とテキストが表示されるようになっています。
普段であれば、再度メニューをクリックすると中身が閉じられると思いますが、
開いた状態の所にも「閉じる」のボタンを付けて、メニューが閉じられるように実装したいです。

    <label for="Panel1">タイトル1</label>
    <input type="checkbox" id="Panel1" class="on-off" checked/>
    <ul>
      <div class="txt">
        <p></p>
        /*****ここらへんに「閉じる」を付けて該当のメニューを閉じる*****/
      </div>
    </ul>
    <label for="Panel2">タイトル2</label>
    <input type="checkbox" id="Panel2" class="on-off" />
    <ul>
      <div class="txt">
        <p></p>
      </div>
    </ul>

CSSは以下のようになっています。
label {
color: #000;
padding: 15px 0 15px 25px;
display: block;
border: 1px solid #fff;
font-weight: bold;
margin-bottom: 10px;
}

input[type="checkbox"].on-off{
display: none;
}

.menu ul {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin: 0;
padding: 0;
list-style: none;
}

input[type="checkbox"].on-off + ul{
height: 0;
overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
height: auto;
margin: 20px 0;
}

閉じるボタンを作るのに、divで囲って等やっていますが、お手上げになってしまったためご教授頂きたく思います。
JQueryは使わない方向で考えているためCSSの実装のみで行いたいです。
宜しくお願いします。

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

回答1件

ベストアンサー

HTMLもCSSもちょっとだけかじったくらいなので無理矢理な提案だったら申し訳ありません。
私なら

lang
1 <label for="Panel数字">タイトル1</label> 
2        <input type="checkbox" id="Panel数字" class="on-off" checked/>

このように再度<label>を使って対処します(初心者なのでいけないことでしたらすみません)
ちょっと自分のサイトでもテストしてみましたが好きなところにいれこんだら閉じました。
既存のCSSをそのまま使うとlabelのデザインが適用されてしまいますので以下のように<label>以外の要素にclassなどを適用して装飾しました。

lang
1<label><p class="">タイトルや閉じる文字(閉じるは<span class=""></span>でも)</p></label>
2

としました。

<p></p>は<div>要素でも出来ると思います。 CSSでlabelには「display: block; 」を残して(ここらへんは詳しく見ていないので残したほうがいいのか悪いのか把握していません。試してみてください。) <p>や<span>などに適用できるclass指定で装飾すればなんとかできるかもしれません。

「閉じる」をつける一つの案なので色々雑で申し訳ありません。

投稿2015/05/14 16:35