[CSS] Accordion code variant

Keepiru's picture

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>
Tavra's picture

Ohgod i love

Ohgod i love it!
/stole/

Thank you so much ;0;
by VasilisaKonti <3


yass

yass
Aivilo's picture

&hearts;

Mary13's picture

Ooh. This is nice.

Ooh. This is nice.
Avatar by me& signature courtesy by velveteensoldier <3
Negma's picture

Hello! Thank you a lot for

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
Proud to be a frog

mmmMMMM

mmmMMMM

Yessss

Yessss
SapphireSkye's picture

Mmmm yes thank you so much

Mmmm yes thank you so much for putting this up! <3
Avatar by Mary13!
Mjrn's picture

Oh, this is neat. Thanks for

Oh, this is neat. Thanks for sharing it. ♥
Account previously Mjrn, returned to Veedeer.
Keepiru's picture

Nice job Negma! c: Glad you

Nice job Negma! c:

Glad you like this code.
Ravyn's picture

Ty.

Ty.
arme's picture

Thank you so much >;3

Thank you so much >;3
Starling's picture

Oh my gosh. Thankyou!! May

Oh my gosh. Thankyou!! May have to steal this...