JavaScript show/hide by selecting radio button

Unfortunately it's not working if I put it in a web page:

Works for me (http://www.marcorpsa.com/ee/t1188a.html

In what way is it not working for you?

NB: This solution is presented as one of many. My rule of coding in html is always leave scripting for last - in other words - accomplish what you can with HTML, then move to CSS and finally if you are not able to achieve the required result explore a scripting option. There is a tendency to use JavaScript / JQuery for everything when in many cases CSS will do the job and often much better than script.

That is not necessarily the case in this situation - and depends entirely on your markup. For instance if you choose to wrap your <input type="radio"> in a div that will take it down a different branch of the DOM than the DIV you are trying to target - leaving you with no choice but to use JavaScript to achieve the desired result.

In a few of the JavaScript solutions on this page .next() has been used to select the target <div>. .next() is interchangeable with the CSS + operator and so if you are considering using JQuery with .next() you should really rather use CSS, Another advantage of the CSS solution in this instance is that there is no need to do anything specific to hide in-active elements - they hide automatically as the default style is display:none - this only gets overridden when the preceding element is checked - as soon as its checked status changes the default style is imposed and the element is hidden. A JQuery solution requires you to explicitly hide the visible element - either directly or by means of adding / removing a class.

Here is an example using JQuery on markup where the input does not immediately precede the content it should display.

Consider the following markup

<div class="form-group">
  <label for="radio1">Option 1</label>
  <input type="radio" id="radio1" name="radio1" class="togglme" value="1" data-target="panel1"/>
</div>
<div id="panel1" class="toggleme">Toggle me div 1</div>
<div class="form-group">
  <label for="radio2">Option 2</label>
  <input type="radio" id="radio2" name="radio1" class="togglme" value="2" data-target="panel2"/>
</div>
<div id="panel2" class="toggleme">Toggle me div 2</div>
<div class="form-group">
  <label for="radio3">Option 3</label>
  <input type="radio" id="radio3" name="radio1" class="togglme" value="3" data-target="panel3"/>
</div>
<div id="panel3" class="toggleme">Toggle me div 3</div>

Select all Open in new window

The <input>'s cannot access the target div's through a .next() operation - either a direct targeting through id is required or traversing up the DOM to a common parent.
CSS will not work in this situation.

In the above markup you will notice the <input> has a custom data attribute data-target. This makes the markup a bit more wordy but it does make it easier to target the right <div> when the input is clicked. The JQuery in this case would be as follows

$(function() {
  $(':radio').click(function(e) {
    // Hide the visibile div's
    $('.toggleme').hide();
    // Show the selected one by using the
    // target's id obtained from the custom
    // data attribute of the clicked input
    $('#' + $(this).data('target')).show();
  });
});

Select all Open in new window

You can see the above in a working sample here