Make div visible when option is checked

Question

I have looked over several different questions helping me get to this point however I can't figure out the selector that allows me to get to an outside DIV.

If I remove the two containing DIVs the code works perfectly, However with formatting I need the divs to be able to control the look. Any help would work I know the ~ is the child selector which is why it works without the DIVs.

How do I select any DIV?

Code:

.reveal-if-active {
  color: #ccc;
  font-style: italic;
  opacity: 0;
  transform: scale(0.8);
  max-height: 0px;
  transition: 0.5s;

}

input#photo1:checked ~ div#portraits,

input#photo2:checked ~ div#wedding,

input#photo3:checked ~ div#other {

  color: #f00;
  font-style: normal;
  transform: scale(1);
  opacity: 1;
  max-height: 150px;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>

</head>

<body>
  <form>
    <div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
      <label for="photo">
        <span class="error" id="err-phone">Please Select What you are looking for?</span>
      </label>
      <input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
      <label for="photo1">Portraits</label>
      <input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
      <label for="photo2">Wedding</label>
      <input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
      <label for="photo3">other</label>
    </div>
    <div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
    <div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
    <div class="eight columns reveal-if-active" id="other" name="other">Other</div>
  </form>
</body>

</html>

possible duplicate of [CSS selector for a checked radio button's label](http://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label) — Dylan Corriveau, Mar 22 '15 at 23:49

score 2 · Answer 1 · edited May 23 '17 at 11:50

I think you can't yet style a parent based on descendants with CSS only, you might consider using Javascript or jQuery maybe. Look at this links: Parent Selectors in CSS, Is there a CSS parent selector?

Try this HTML structure:

<body>
  <form>
    <div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
      <label for="photo">
        <span class="error" id="err-phone">Please Select What you are looking for?</span>
      </label>
      <input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
      <label for="photo1">Portraits</label>
      <input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
      <label for="photo2">Wedding</label>
      <input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
      <label for="photo3">other</label>

      <div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
      <div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
      <div class="eight columns reveal-if-active" id="other" name="other">Other</div>

    </div>
  </form>
</body>

In order to get this working, you'll need to have the items that have the reveal-if-active class in the same div container with the option. Check this article.

To position them outside of the parent <div> use positioning on .reveal-if-active class:

position:absolute;
top: 40px;

See Example.

That is my next option if I can't figure this out. However I would like them outside the containing DIV. Just because of the way I am formatting the form I can't have it inside the same DIV. Is there a CSS selector that would work outside of that DIV? — Chad Braithwaite, Mar 23 '15 at 00:23
Yes that definitely puts it somewhere else. However it doesn't solve the problem. Because of the structure of the entire form which I removed out... I need to figure out the CSS of getting it outside the div. not just positioning it. — Chad Braithwaite, Mar 23 '15 at 01:02

score 0 · Accepted Answer · edited May 23 '17 at 12:06

cchacholiades is correct -- you will need javascript to do what you want. +1

On a CSS hover event, can I change another div's styling?

However, the javascript for what you desire is quite simple -- it would look something like this:

$(document).ready(function(){
    $('input[name="photo"]').click(function(){
        var phot = $(this).val();
        $('#'+phot).show().css({'background':'yellow','opacity':'1'});
    });
});

jsFiddle Demo

Notes:

(1) Because you already have the ID of the desired DIV stored as the value of the clicked radio button, it is simple to capture that value: $(this).val() -- $(this) refers to the element that was clicked on

(2) I demonstrated using both .show() -- which is the same as css display:block, and actually using css statements themselves.

Frankly, I think it will be faster for you just to use jQuery to do this. The only caveat is you must load the jQuery library, usually in the <head> tags like this:

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

If you want some fast lessons on jQuery, find free video tuts here:

https://www.thenewboston.com/videos.php?cat=32

or at

http://phpacademy.org

Can I just ask one question? Why did you make the background yellow with the javascript? And when I take that out it stops working? — Chad Braithwaite, Mar 23 '15 at 03:06
Just delete exactly these characters, including the comma, and it will keep working: *`'background':'yellow',`* The `.css()` jQuery method has two forms: `.css('selector','action');` and -- when multiple statements are required, `.css({'selector':'action', 'selector2':'action2'});` *-- note that the selector/action separator changes from comma to colon, and the comma now separates the multiple statements* — cssyphus, Mar 23 '15 at 17:59

Make div visible when option is checked

2 Answers2