JavaScript Radio buttons to Hide / Unhide Section

[Grayson_Basil]

Hi

I need a simple script to show / hide a table using radio buttons. 

YES / NO buttons which will be unhide / hide

I found a few examples on the web, but none are working. 

This is what I have working so far, but these are not radio buttons, but text boxes.

1. Place the table   
         Starting with a blank report, we can use a basic table of three columns and three rows.

    2. Place the permanent objects.
         In the second row, place a chart in each table cell for a total of three charts.

    3. Place the list reports.
         In the third row add three list reports, one in each table cell. We'll call them ListReport1, ListReport2 and ListReport3.

    4. Add HTML tags around list reports
          In the first table cell, add an HTML item above ListReport1 and type in <div id="List1" style="display:none;">. Add an HTML item below the list report and type in </div>.
         In the second table cell, add an HTML item above ListReport2 and type in <div id="List2" style="display:none;">. Add an HTML item below the list report and type in </div>.
        And in the third table cell, add an HTML item above ListReport3 and type in <div id="List3" style="display:none;">. Add an HTML item below the list report and type in </div>.

You can save the report and run it now and it should show all three charts and no list reports. Items in the div tags are hidden.

    5. Add radio controls
         In the top row, middle table cell add an HTML item and insert the following Javascript or a modified version to suit what you need.

<Input type - radio Name=''r1" Value ="Show" onclick="javascript:Hide('List1','List2','List3')" checked>Hide Data

<Input type - radio Name=''r1" Value ="Show" onclick="javascript:Show('List1','List2','List3')" checked>Show Data

<script type="text/javascript">

function Hide(a,b,c) {
document.getElementById(a).style.display="none";
document.getElementById(b).style.display="none";
document.getElementById(c).style.display="none";
}

function Show(a,b,c) {
document.getElementById(a).style.display="block";
document.getElementById(b).style.display="block";
document.getElementById(c).style.display="block";
}

</script>

All that was done was some basic HTML and Javascripting to show and hide HTML DIV sections in order to allow a clean interface showing only charts when the report is run but the user can then view the data in the list reports as well if wanted.