css - CSS3 Hide/Show Filter button using Child Selectors? -

css - CSS3 Hide/Show Filter button using Child Selectors? -

i'm trying create button hide , show content using css3 kid selectors, trick works minimal markup.

soon add together multiple div's within section(where content placed) kid selectors don't hide content anymore rendering hide/show button useless.

any help or improve understanding what's going on appreciated it. help.

here's problematic markup:

css:

.please > section:first-of-type { float: right; width: 62.5%; } .please > section:last-of-type { display: none; visibility: hidden; } .please { -webkit-transition: .125s linear; -moz-transition: .125s linear; -ms-transition: .125s linear; -o-transition: .125s linear; transition: .125s linear; } #read_more[type=checkbox] { border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } [for="read_more"] { position: absolute; left: 0; width: 100px; text-align: center; padding: .25rem; 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"] .spanz:last-of-type { display: none; visibility: hidden; } #read_more[type=checkbox]:checked ~ #nomore { display: block; visibility: visible; width: 100%; } #read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:first-of-type { display: none; visibility: hidden; } #read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:last-of-type { display: block; visibility: visible; }

html:

<div class="please"> <div id="filter container"> <input type="checkbox" id="read_more" role="button"> <label for="read_more" onclick=""><span class="spanz">show filter</span><span class="spanz">hide filter</span></label> <br /><br /> </div> <section id="nomore"> <div> <ul> <li>owls hunt little mammals</li> <li>owls hunt little mammals</li> <li>owls hunt little mammals</li> </ul> </div> <div> <ul> <li>owls hunt little mammals</li> <li>owls hunt little mammals</li> <li>owls hunt little mammals</li> </ul> </div> <div> <ul> <li>owls hunt little mammals</li> <li>owls hunt little mammals</li> <li>owls hunt little mammals</li> </ul> </div> </section> </div>

and here's simple markup works not quite need.

css:

.please > section:first-of-type { float: right; width: 62.5%; } .please > section:last-of-type { display: none; visibility: hidden; } .please { -webkit-transition: .125s linear; -moz-transition: .125s linear; -ms-transition: .125s linear; -o-transition: .125s linear; transition: .125s linear; } #read_more[type=checkbox] { border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } [for="read_more"] { position: absolute; left: 0; width: 100px; text-align: center; padding: .25rem; 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"] .spanz:last-of-type { display: none; visibility: hidden; } #read_more[type=checkbox]:checked ~ #nomore { display: block; visibility: visible; width: 100%; } #read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:first-of-type { display: none; visibility: hidden; } #read_more[type=checkbox]:checked ~ [for="read_more"] .spanz:last-of-type { display: block; visibility: visible; }

html:

<div class="please"> <input type="checkbox" id="read_more" role="button"> <label for="read_more" onclick=""><span class="spanz">show filter</span><span class="spanz">hide filter</span></label> <br /><br /> <section id="nomore"> <ul> <li>owls hunt little mammals</li> <li>owls hunt little mammals</li> <li>owls hunt little mammals</li> </ul> </section> </div>

you should need create input , lable each section can hide/show parts

i write sample code goal, can see

<div> <article> <input type="checkbox" id="read_more_1" role="button"> <label for="read_more_1" class ="button" onclick=""><span>read more</span><span>hide shit!</span></label> <section> <p>trim content</p> </section> <section> <p>full content</p> </section> </article> <article> <input type="checkbox" id="read_more_2" role="button"> <label for="read_more_2" class ="button" onclick=""><span>read more</span><span>hide shit!</span></label> <section> <p>trim content</p> </section> <section> <p>full content</p> </section> </article> <article> <input type="checkbox" id="read_more_3" role="button"> <label for="read_more_3" class ="button" onclick=""><span>read more</span><span>hide shit!</span></label> <section> <p>trim content</p> </section> <section> <p>full content</p> </section> </article> </div>

and css:

article { margin-bottom: 3rem; position: relative; *zoom: 1; } article:before, article:after { content: ""; display: table; } article:after { clear: both } article section:first-of-type { } article section:last-of-type { display: none; visibility: hidden; } input[type=checkbox] { border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } [for^="read_more"] { position: absolute; bottom: -3rem; } [for^="read_more"] span:last-of-type { display: none; visibility: hidden; } input[type=checkbox]:checked ~ section:first-of-type { display: none; visibility: hidden; width: 100%; } input[type=checkbox]:checked ~ section:last-of-type { display: block; visibility: visible; 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 can run in (http://jsfiddle.net/shahabal/zrzjd3t1/) link

css css3