【CSS】ラジオボタンによる開閉

　どうも！LSSです！！

かなり前に、

little-strange.hatenablog.com

という記事を出し、その後も何度かそれに似たものを出していました。

これはチェックボックスを使用した、単一のメニューの開閉を実現するものでしたが、今回はラジオボタンを使用して「複数のうちからひとつを開く」開閉メニューを作ってみました。

ラジオボタンによる開閉サンプル

塀

「隣の家に塀が出来たんだってね」
「へ～え」 囲い

「隣の家に囲いが出来たんだって」
「カッコイー！」 Wall

"There was a wall in the next house"
"Wow...LL" 見栄っ張り

「お隣の奥さん、すごい見栄っ張りなのよ」
「そうなのかい？」
「ママ友が服を新調したからって、ご主人におねだりして高い服を買わせたんですって。…もちろん、うちはそれより高い服を買ってくださるでしょうね？」

コード

<style>
.rdd input{display:none;}
.rdd label,.rdds{display:block;}
.rdds{
width:300px;height:35px;overflow:hidden;
border:5px outset #ddddee;
background-color:#ccccdd;
}
.rdd input:checked+.rdds{
height:auto;
border:5px inset #ddddee;
background-color:#eeeeff;
}
</style>
<div class="rdd">
<label><input name="slctn" type="radio" /><span class="rdds">塀<br /><br />「隣の家に塀が出来たんだってね」<br />「へ～え」</span></label>
<label><input name="slctn" type="radio" /><span class="rdds">中略</span></label>
<label><input name="slctn" type="radio" /><span class="rdds">中略</span></label>
<label><input name="slctn" type="radio" /><span class="rdds">中略</span></label>
</div>

使い方

↑コード全文をコピペして、赤太字部分を好きな内容に書き換えてください。（<br/>は表示時に改行になります。）

<label><input name="slctn" type="radio" /><span class="rdds">中略</span></label>

というのが並んでいますが、この行がひとつの項目となり、自由に増やしたり減らしたりできます。

あとがき

複数の項目が「一行見出し」として並んでいて、クリックしたところだけを広げてみせる、という事を行っています。

一行見出しとして表示している部分が

height:35px;overflow:hidden;

という指定で、「高さを35ピクセルに指定、はみ出した部分は表示しない」とする事で、２行目以降を隠した状態にしています。

クリックしてラジオボタン（非表示）がチェック状態になると、

height:auto;

が35pxの指定を上書きし、内容に応じた高さに自動調整される、という仕組みですね。

２か所ある border、background-color は仕組みには影響しない単なる装飾ですので、こちらは好きに変更する事ができます^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^