I am trying to make it so when a button is pressed a corresponding DIV element is displayed. There is a row of buttons once one is clicked the div element should display text relevant to the button.This is what I have so far:\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title> <style type="text/css">#sidebar div {background-color: #78a809;display: block;padding: 5px;margin: 15px;text-align: center;text-decoration: none;-moz-border-radius: 5px;border-radius: 5px;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 3px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #74b807;border-right-color: #74b807;border-bottom-color: #74b807;border-left-color: #74b807;width:120px;font-family:Arial, Helvetica, sans-serif;font-size:12px;cursor
ointer;}#sidebar div:hover {background-color: #8ac403;border-bottom-width: 1px;margin-bottom:17px;}</style></head><body><script type = "text/javascript">function toggle(vals) {var d1=document.getElementById("info_1");var d2=document.getElementById("info_2");var d3=document.getElementById("info_3");var d4=document.getElementById("info_4");var d5=document.getElementById("info_5");var d6=document.getElementById("info_6");if (vals=1) {d1.style.display ="block";d2.style.display ="none";d3.style.display ="none";d4.style.display ="none";d5.style.display ="none";d6.style.display ="none";}if (vals=2) {d2.style.display ="block";d1.style.display ="none";d3.style.display ="none";d4.style.display ="none";d5.style.display ="none";d6.style.display ="none";}if (vals=3) {d3.style.display ="block";d2.style.display ="none";d1.style.display ="none";d4.style.display ="none";d5.style.display ="none";d6.style.display ="none";}if (vals=4) {d4.style.display ="block";d2.style.display ="none";d3.style.display ="none";d1.style.display ="none";d5.style.display ="none";d6.style.display ="none";}if (vals=5) {d5.style.display ="block";d2.style.display ="none";d3.style.display ="none";d4.style.display ="none";d1.style.display ="none";d6.style.display ="none";}if (vals=6) {d6.style.display ="block";d2.style.display ="none";d3.style.display ="none";d4.style.display ="none";d5.style.display ="none";d1.style.display ="none";}}</script><table width="490" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="162" valign="top" id="sidebar"><div onClick="toggle('1');">Button 1</div><div onClick="toggle('2');">Button 2</div><div onClick="toggle('3')">Button 3</div><div onClick="toggle('4')">Button 4</div><div onClick="toggle('5')">Button 5</div><div onClick="toggle('6')">Button 6</div> </td> </tr></table><div id="info_1" style="display:block">Indo Text</div><div id="info_2" style="display:none">Indigo Text</div><div id="info_3" style="display:none">Bangkok House Text</div><div id="info_4" style="display:none">Mr D Text</div><div id="info_5" style="display:none">Emporium Text</div><div id="info_6" style="display:none">Pacifica Text</div></body></html>\[/code\]Why is this not working? Thanks for any help.
ointer;}#sidebar div:hover {background-color: #8ac403;border-bottom-width: 1px;margin-bottom:17px;}</style></head><body><script type = "text/javascript">function toggle(vals) {var d1=document.getElementById("info_1");var d2=document.getElementById("info_2");var d3=document.getElementById("info_3");var d4=document.getElementById("info_4");var d5=document.getElementById("info_5");var d6=document.getElementById("info_6");if (vals=1) {d1.style.display ="block";d2.style.display ="none";d3.style.display ="none";d4.style.display ="none";d5.style.display ="none";d6.style.display ="none";}if (vals=2) {d2.style.display ="block";d1.style.display ="none";d3.style.display ="none";d4.style.display ="none";d5.style.display ="none";d6.style.display ="none";}if (vals=3) {d3.style.display ="block";d2.style.display ="none";d1.style.display ="none";d4.style.display ="none";d5.style.display ="none";d6.style.display ="none";}if (vals=4) {d4.style.display ="block";d2.style.display ="none";d3.style.display ="none";d1.style.display ="none";d5.style.display ="none";d6.style.display ="none";}if (vals=5) {d5.style.display ="block";d2.style.display ="none";d3.style.display ="none";d4.style.display ="none";d1.style.display ="none";d6.style.display ="none";}if (vals=6) {d6.style.display ="block";d2.style.display ="none";d3.style.display ="none";d4.style.display ="none";d5.style.display ="none";d1.style.display ="none";}}</script><table width="490" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="162" valign="top" id="sidebar"><div onClick="toggle('1');">Button 1</div><div onClick="toggle('2');">Button 2</div><div onClick="toggle('3')">Button 3</div><div onClick="toggle('4')">Button 4</div><div onClick="toggle('5')">Button 5</div><div onClick="toggle('6')">Button 6</div> </td> </tr></table><div id="info_1" style="display:block">Indo Text</div><div id="info_2" style="display:none">Indigo Text</div><div id="info_3" style="display:none">Bangkok House Text</div><div id="info_4" style="display:none">Mr D Text</div><div id="info_5" style="display:none">Emporium Text</div><div id="info_6" style="display:none">Pacifica Text</div></body></html>\[/code\]Why is this not working? Thanks for any help.