« »

If you want to save the space on your web pages, let use this JavaScript. When users click any radio button, its corresponding information is automatically displayed. A simple and quick JavaScript but useful and high customization.

Also see: Click Radio Button to View Information with images

Label: radio, button, view, information, image, display, product, object, save, space, simple, customization

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript">
<!--
// Created by Sandeep Gangadharan - http://sivamdesign.com/scripts/

// Topic 1-6 are numbered 0-5 below.
var details=new Array();
details[0] = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."
details[1] = "Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki."
details[2] = "Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li."
details[3] = "Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li."
details[4] = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."
details[5] = "Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki."
details[6] = "Introduction:nClick on the radio buttons on the left to learn more about the respective topics!"

function topica() {
 if (document.texter.point[0].checked) { document.texter.text.value=details[0]; }
 if (document.texter.point[1].checked) { document.texter.text.value=details[1]; }
 if (document.texter.point[2].checked) { document.texter.text.value=details[2]; }
 if (document.texter.point[3].checked) { document.texter.text.value=details[3]; }
 if (document.texter.point[4].checked) { document.texter.text.value=details[4]; }
 if (document.texter.point[5].checked) { document.texter.text.value=details[5]; }
 }

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  document.texter.text.value=details[6];
});
//-->
</script>

Copy All x2

<fieldset style="width: 400px;">
<legend><strong>Make your selection</strong></legend>
<form name="texter">
<table style="padding: 10px 10px 0pt;">
<tbody><tr><td class="smaller" valign="top" width="100">
<input name="point" onclick="topica();" type="radio">Topic 1<br>
<input name="point" onclick="topica();" type="radio">Topic 2<br>
<input name="point" onclick="topica();" type="radio">Topic 3<br>
<input name="point" onclick="topica();" type="radio">Topic 4<br>
<input name="point" onclick="topica();" type="radio">Topic 5<br>
<input name="point" onclick="topica();" type="radio">Topic 6<br>
</td><td>
<textarea name="text" rows="6" cols="30" wrap="virtual" style="border: medium none ; margin-left: 20px;">