4

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.

Luke Hammer
  • 2,076
  • 3
  • 18
  • 31
  • You can do it using either the + selector or ~ selector, however this requires special conditions. – Rainbow Jun 19 '18 at 01:13
  • 1
    where can i learn more about these special conditions? – Luke Hammer Jun 19 '18 at 01:14
  • 1
    [This answer](https://stackoverflow.com/a/18752327/8783706) may help you – Willi Jun 19 '18 at 01:23
  • @Willi this is better than anything I found when searching. The problem I now see is that I had an incorrect understanding of the "~" in CSS meant. I was assuming that the "~" selected anything. EG #Type2:checked ~ #ManagerDisplay I thought meant. IF Type2 is checked then Find #ManagerDisplay and Apply related styling. – Luke Hammer Jun 19 '18 at 01:32

1 Answers1

12

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>

References

Adjacent Sibling Combinator

for Attribute

zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • This addresses the Problem. I need to match the style of other elements that are using radio buttons in the form (extracted out for clarity). – Luke Hammer Jun 19 '18 at 14:32
  • Is it possible to do this and keep the display of the radio buttons? – Luke Hammer Jun 19 '18 at 14:32
  • Yes indeed, hiding them is merely for aesthetics. The thing that's critical for them is their position in relation to the div/fieldset. If there's something between them then change the `+` to a `~`. – zer00ne Jun 19 '18 at 15:11