Member Avatar for Navlag

The code below seems to work great in Google Chrome, it hides a question in a div unless the question before it is answered.

However, it doesn't seem to work at all in I.E 8.

Can someone give me a solution on how to make it work in both browswers please?

Thank you in advance

<label for="cell">3. Do you currently have a cell phone? (Y/N)</label>
<input type="checkbox" name="cell" id="cell" data-on="Yes" data-off="No" />

<div class="hide_if_no">
<label for="blackBerry">4. If YES, is the cell phone a BlackBerry? (Y/N)</label>
<input type="checkbox" name="blackBerry" id="blackBerry" data-on="Yes" data-off="No" />
</div>

<style>
input[type=checkbox] ~ div.hide_if_no {display:none}
input[type=checkbox]:checked ~ div.hide_if_no {display:block}
</style>
  • 3 Contributors
  • 7 Replies
  • 341 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by EvolutionFallen

Dani AI

Generated

Short summary: relying on CSS sibling selectors to show/hide a follow‑up question is brittle across older IE modes. pointed this out and ’s jQuery toggle is a practical fix when jQuery is available. Below is a small, cross‑browser (IE8-friendly) approach that avoids CSS sibling hacks and works whether or not jQuery is present.

Use a container with an id and a simple CSS class to hide/show, then toggle that class from JavaScript. The script uses addEventListener with an attachEvent fallback so it runs in IE8. Put the script after the markup (or run on DOM ready) so elements exist when it runs.

<label for="q-cell">3. Do you currently have a cell phone?</label>
<input type="checkbox" id="q-cell" name="cell">

<div id="q-blackberry-container" class="dependent" aria-hidden="true">
  <label for="q-blackberry">4. If YES, is it a BlackBerry?</label>
  <input type="checkbox" id="q-blackberry" name="blackberry">
</div>

<style>
.dependent { display: none; }
.dependent.visible { display: block; }
</style>

<script>
(function () {
  var chk = document.getElementById('q-cell');
  var dep = document.getElementById('q-blackberry-container');
  if (!chk || !dep) return;
  function update() {
    var checked = !!chk.checked;
    dep.className = dep.className.replace(/\bvisible\b/,'').trim() + (checked ? ' visible' : '');
    dep.setAttribute('aria-hidden', !checked);
  }
  if (chk.addEventListener) chk.addEventListener('change', update, false);
  else if (chk.attachEvent) chk.attachEvent('onclick', update);
  update();
})();
</script>

Troubleshooting tips: ensure a standards DOCTYPE (for IE8 standards mode), avoid duplicate IDs, check the console for script errors (an early error stops execution), and verify the script runs after the DOM (or wrap it in a DOM ready handler). If you prefer jQuery, ’s compact approach is fine — just confirm jQuery is actually included before your handler. Accessibility: update aria-hidden as shown so assistive tech reflects the state.

Recommended Answers

All 7 Replies

Member Avatar for Dani

The general sibling selector (aka ~) is CSS3 and not currently fully supported by IE.

Try doing

div.hide_if_no input[type=checkbox] { display: none }
div.hide_if_no input[type=checkbox]:checked { display: block !important }
Member Avatar for Dani

Oh, actually, nevermind ... That wouldn't exxactly work ;)

Sorry, the only way I can think of doing it off the top of my head is with jQuery.

Member Avatar for Navlag

Would you mind showing me an example?

Member Avatar for Dani

I did some more research and it seems that while the general sibling selector (aka ~) requires CSS3 and currently is not IE compatible, the adjacent sibling selector (aka +) will work with CSS2 and IE7+.

What this means is that, if both input checkboxes are immediate siblings to each other:

input#have_cell + input#have_blackberry { display: none }
input#have_cell:checked + input#have_blackberry { display: block !important }

As mentioned, this only works if the second input is immediately following the first one as its adjacent sibling. The selector operates on the adjacent sibling, so in this case checking the question asking whether you have a cellphone triggers asking the follow up question of whether it is a blackberry.

As far as jQuery is concerned, I would do something like:

$(document).on('click', 'div.hide_if_no input[type=checkbox]:checked', function() {
    $(this).siblings().hide();
});

$(document).on('click', 'div.hide_if_no input[type=checkbox]:not(:checked)', function() {
    $(this).siblings().show();
});

Of course, there are probably much better and more efficient ways of doing it. This is just the general concept.

Member Avatar for EvolutionFallen

I got this working when running IE9 in IE8 mode (browser and standards)

$('#cell').click(function() {
    $('.hide_if_no').toggle(this.checked);
});

Here's the JSFiddle: http://jsfiddle.net/PhfJB/1/

P.S. - Dani, in your .on() calls above, shouldn't the second parameters for each call be input#cell:checked and input#cell:not(:checked)? I think we need to check if the #cell checkbox is checked, not if the checkbox inside .hide_if_no is

Edited by EvolutionFallen
Member Avatar for Navlag

Weird, I can get this working on a blank page and I see it working on Jfiddle, but I can't get it to work in my established page...

Member Avatar for EvolutionFallen

Do you have jQuery included on your page? What happens when you click on the button?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.