Show and hide content by radio button using CSS only - HTML CSS CSS Form

HTML CSS examples for CSS Form:input radio button

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

Description

Show and hide content by radio button using CSS only

Demo Code

ResultView the demo in separate window 

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

* {<!--from  w w w.j  a va  2 s . co m-->
   padding: 0;
   margin: 0;
   background-color: #262626;
   color: white;
}
.radio-button {
   display: none;
}
#filter {
   padding: 5% 0;
   display: flex;
   justify-content: center;
}
.filter-label {
   display: inline-block;
   border: 4px solid green;
   padding: 10px 20px;
   font-size: 1.4em;
   text-align: center;
   cursor: pointer;
}
.content {
   padding: 3% 10%;
   display: none;
}
h1 {
   font-size: 2em;
}
.date {
   padding: 5px 30px;
   font-style: italic;
}
.filter-label:hover {
   background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
   background-color: green;
}
#tech-radio:checked~main .tech,
#featured-radio:checked~main .featured,
#personal-radio:checked~main .personal {
   display: block;
}


      </style> 
 </head> 
 <body> 
  <input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked> 
  <input type="radio" id="personal-radio" class="radio-button" name="content-filter"> 
  <input type="radio" id="tech-radio" class="radio-button" name="content-filter"> 
  <header id="filter"> 
   <label for="featured-radio" class="filter-label featured">Featured</label> 
   <label for="personal-radio" class="filter-label personal">Personal</label> 
   <label for="tech-radio" class="filter-label tech">Tech</label> 
  </header> 
  <main> 
   <article class="content featured tech"> 
    <header> 
     <h1>Cool Stuff</h1> 
     <h3 class="date">Today</h3> 
    </header> 
    <p> I'm showing cool stuff in this article! </p> 
   </article> 
   <article class="content personal"> 
    <header> 
     <h1>Not As Cool</h1> 
     <h3 class="date">Tuesday</h3> 
    </header> 
    <p> This stuff isn't nearly as cool for some reason :(; </p> 
   </article> 
   <article class="content tech"> 
    <header> 
     <h1>Cool Tech Article</h1> 
     <h3 class="date">Last Monday</h3> 
    </header> 
    <p> This article has awesome stuff all over it! </p> 
   </article> 
   <article class="content featured personal"> 
    <header> 
     <h1>Cool Personal Article</h1> 
     <h3 class="date">Two Fridays Ago</h3> 
    </header> 
    <p> this isi a tetst this is a test tehsis asidf erqe a sdf q ea sdf ! </p> 
   </article> 
  </main>  
 </body>
</html>

Related Tutorials