html - multiple CSS only show/hide button (no java/jquery) -

html - multiple CSS only show/hide button (no java/jquery) -

i need code joke website trying make, uses show/hide button reveal content/hide content.

it starts off hidden, , there button alter it.

however, cannot contain javascript, or jquery, assesment school project doing (which on css mainly)

is possible have multiple? have achieved 1 far.

my code far (i got off of website http://cssdeck.com/labs/css-only-showhide ): (html)

<article> <input type="checkbox" id="rma" role="button"> <label for="rma" onclick=""><span>show</span><span>hide</span></label> <section> <p>joke</p> </section> <section> <p>punchline</p> </section> </article>

(css)

article { position: relative; } article:before, :after { display: table; } article:after { clear: both } article section:last-of-type { display: none; visibility: hidden; } input[type=checkbox] { width: 1px; overflow: hidden; position: absolute; } [for="read_more"] { position: absolute; left: 100px; width: ; text-align: center; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); } [for="read_more"]:hover { background: rgba(0,0,0,.5); color: rgb(255,255,255); } [for="read_more"] span:last-of-type { display: none; visibility: hidden; } input[type=checkbox]:checked ~ section { display: block; visibility: visible; width: 100%; } input[type=checkbox]:checked ~ figure { width: 100% } input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type { display: none; visibility: hidden; } input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type { display: block; visibility: visible; }

you used input[type=checkbox] see if checkbox selected , should utilize id, way can check each 1 , not of them, example:

#first[type="checkbox"] { /* code here */ } #second[type="checkbox"] { /* code here */ }

html css