[CSS] Accordion code variant

March 23, 2015 - 7:36pm — Keepiru

Here's a nice and short accordion code, feel free to use it!

TEXT A

TEXT B

TEXT C

CSS

.accordion{background-color:#111;color:#fff;border-top:solid 1px #444;padding-top:5px;line-height:20px;} .accordion{background-color:#111;color:#fff;border-top:solid 1px #444;padding-top:5px;line-height:20px;} .accordion input[type='radio']:checked ~ .info{height:130px;transition:.2s linear;} input[type='radio']{display:none;} label{margin-left:15px;cursor:pointer;font-weight:bold;} .accordion .info{background:#fff;color:#222;width:100%;height:0;padding-left:15px;display:block;overflow:hidden;box-sizing:border-box;transition:.2s linear;}

HTML

<div style="width:300px;"><div class="accordion"><input type="radio" name="block"!important id="blockA" checked><label for="blockA"><span>A</span></label><div class="info"><p>TEXT A</p></div></div><div class="accordion"><input type="radio" name="block"!important id="blockB"><label for="blockB"><span>B</span></label><div class="info"><p>TEXT B</p></div></div><div class="accordion"><input type="radio" name="block"!important id="blockC"><label for="blockC"><span>C</span></label><div class="info"><p>TEXT C</p></div></div></div>

Miscellaneous

Keepiru's blog
Login to post comments

March 23, 2015 - 7:40pm — Tavra

Ohgod i love

Ohgod i love it!
/stole/

Thank you so much ;0;

—

March 23, 2015 - 9:40pm — FallingTooFast

Ooh. This is nice.

—

Avatar by me& signature courtesy by velveteensoldier <3

March 24, 2015 - 12:39pm — Negma

Hello!
Thank you a lot for your code!!!! I've experienced it with a roleplay character and it is so cool! Here is the link if you want to see how I used your code: Link to the sample
Thank you so much!!!

—

Biography
In game character: Yzen'Agma