Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

html - hiding/showing a Div based on a Radio button (CSS Only)

I'm looking for a CSS only Answer, I can solve with Javascript/Jquery but I'm attempting to solve without.

IN short, I have to Radio buttons, I would like one div to be displayed if the first one is selected and a Second div if the second one is selected.

I have Created a jsfiddle with a simplified version of myProblem https://jsfiddle.net/lukehammer/x7yw432d/5/ I can not get it to work in the JS fiddle or my code.

    <label>
<input id="Type1" name="UserType" type="radio" value="Contractor">
            Contractor
</label>

<label>
<input id="Type2" name="UserType" type="radio" value="Managment">
             Managment
</label>

<div class = "hideAtStart" id = "contractorDisplay">
  Show me I'm a contractor.
</div>

<div class = "hideAtStart" id = "ManagerDisplay">
  Show me I'm a managerr.
</div>

CSS

.hideAtStart {
display: none;
}

#Type1:checked ~ #contractorDisplay{
  display : block; 
}

#Type2:checked ~ #ManagerDisplay{
  display : block; 
}

Question

How can I show a div when a radio button is pressed ?

**Bonus Points **

BounS Points if the Transition can fade in/out.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Layout

  1. Set each radio before a div (fieldset in this demo)

  2. On each radio:

    • Assign a unique #id
    • Assign an identical [name]
  3. Next make 2 labels with the attribute [for] and set each attribute's value to an #id of a radio. The [for] attribute of the labels are synced to the radio with the same #id so that when the label is clicked so is the radio.

  4. Place these labels anywhere you want on the page.

  5. To make things easier assign a class that will group alike tags together.


Style

  1. Hide the radios and the div that sits after each radio by setting display:none

  2. Make the following ruleset (remember step 5 of Layout)

     .radio:checked + .classOfDiv { display:block }
    

    CSS rulesets are read backwards by the browser: Any element that has the className of .classOfDiv that has a sibling element that is placed before (in code it's more like above or to the left) it and that sibling (older brother?) has the className of .radio and happens to be checked as well...set that .classOfDiv display property to block.

    The + is called an Adjacent Sibling Combinator which is the key to this ruleset. See the References located after the Demo for more details.


Demo

.rad,
.set {
  display: none;
  opacity: 0;
}

.rad:checked+.set {
  display: block;
  opacity: 1;
}

.btn {
  display: inline-block;
  border: 2px inset grey;
  border-radius: 6px;
  padding: 2px 3px;
  cursor: pointer
}

.btn:hover {
  border-color: tomato;
  color: tomato;
  transition: .75s ease;
}

legend {
  font-size: 1.5em
}
<form id='main'>
  <fieldset>
    <legend>SWITCH</legend>
    <label for='rad0' class='btn'>OPEN SET 0</label>
    <label for='rad1' class='btn'>OPEN SET 1</label>
  </fieldset>

  <input id='rad0' class='rad' name='rad' type='radio'>

  <fieldset class='set'>
    <legend>SET 0</legend>
  </fieldset>

  <input id='rad1' class='rad' name='rad' type='radio'>

  <fieldset class='set'>
    <legend>SET 1</legend>
  </fieldset>
</form>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...