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

Question

I want to toggle 2 div's based on dropdown selected value with 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 from dropdown then div 1 should be show and when user selects 2 from drop down div 2 should be shown.

Basically need to toggle both divs based on the drop down value

Some one please help.

I don't know about the select thing but here is a read more example thing that i have made that uses pure css http://jsfiddle.net/avzaoe0e/ — Rachel Gallen, Jul 23 '15 at 13:15
http://jsfiddle.net/hhxd3x25/ refer this link.. hope it will be helpfully. — SVK, Jul 23 '15 at 13:21
you could use collapse - probably closest you will get http://jsbin.com/Amejum/1/edit?html,css,output — Rachel Gallen, Jul 23 '15 at 13:37
Thanks Shruti.. U r example works for me. I modified it to work with div. #select-card:invalid ~ div[id="1"]{ display:none; } #select-card:valid ~ div[id="2"]{ display:none; } — user1097437, Jul 24 '15 at 05:46

score 0 · Answer 1 · edited May 23 '17 at 10:34

Toggling a div

You can achieve the toggle (and / or show / hide) aspect with pure CSS a 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 for the condition of detecting selection and then triggering a toggle (without JS). Unfortunately at this moment in time this is not possible using stand alone CSS, anything you or anyone will come up with will be a hack and less stable then the current standard of doing this; which I believe the lightest option would be jQuery. Take a look at this: CSS Equivalent of the "if" statement *

(+1 for the question, we really should keep pushing for CSS improvements like this)

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

1 Answers1