html - Show/Hide div based on drop down value with out javascript -

i want toggle 2 div's based on dropdown selected value out javascript using css

<select class="number" id="number">     <option value="1" selected="selected">1</option>     <option value="2">2</option> </select> <div id="one">div one</div> <div id="two">div two</div> 

when user selects 1 dropdown div 1 should show , when user selects 2 drop down div 2 should shown.

basically need toggle both divs based on drop down value

some 1 please help.

toggling div

you can achieve toggle (and / or show / hide) aspect pure css few different ways; here's one:

* {   margin:0;   padding:0;   font-family:"helvetica neue", helvetica, sans-serif;   word-spacing:-2px; }  h1 {   font-size:40px;   font-weight:bold;   color:#191919;   -webkit-font-smoothing: antialiased; }  h2 {   font-weight:normal;   font-size:20px;   color:#888;   padding:5px 0; }  .message { background:#181818; color:#fff; position: absolute; top: -250px; left: 0; width: 100%; height: 250px; padding: 20px; transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); overflow: hidden; box-sizing: border-box;  }  .message h1 {   color:#fff; }  #toggle {   position:absolute;   appearance:none;   cursor:pointer;   left:-100%;   top:-100%; }  #toggle + label {   position:absolute;   cursor:pointer;   padding:10px;   background: #26ae90; width: 100px; border-radius: 3px; padding: 8px 10px; color: #fff; line-height:20px; font-size:12px; text-align:center; -webkit-font-smoothing: antialiased; cursor: pointer;   margin:20px 50px;   transition:all 500ms ease; } #toggle + label:after {   content:"open"  }  .container { transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);   padding:5em 3em; }  #toggle:checked ~ .message {   top: 0; }  #toggle:checked ~ .container {   margin-top: 250px; }  #toggle:checked + label {   background:#dd6149; }  #toggle:checked + label:after {   content:"close" } 

codepen.

---

"based on dropdown value"

as condition of detecting selection , triggering toggle (without js). unfortunately @ moment in time not possible using stand alone css, or come hack , less stable current standard of doing this; believe lightest option jquery. take @ this: css equivalent of "if" statement *

(+1 question, should keep pushing css improvements this)