Hide/Show Filter button using Child Selectors - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button style

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button style

Description

Hide/Show Filter button using Child Selectors

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

article {<!--  w  w  w  .j av  a2  s .c  o  m-->
   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;
}


      </style> 
 </head> 
 <body> 
  <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 This 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 This 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 This Shit!</span> </label> 
    <section> 
     <p>trim content</p> 
    </section> 
    <section> 
     <p>full content</p> 
    </section> 
   </article> 
  </div>  
 </body>
</html>

Related Tutorials