Link here: http://www.babyvalue.co.uk/nt/Tots.html Basically, it's the tabs at the bottom that I'm working with. I want it that when you click them they switch across to being "on" - this works fine, but the first one won't turn off. Is there a way I can have it set to "on" by default? Code: <html> <head> <title>Tots</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> var curActive; function activateSection(section) { //revert currently active image if it is defined if(typeof(curActive) != "undefined") { var curImg = document.getElementById(curActive + "_img"); curImg.src = "images/" + curActive + "_inactive.jpg"; } //make new image currently active var img = document.getElementById(section + "_img"); img.src = "images/" + section + "_active.jpg"; //put the requested section in the currently active variable curActive = section; //do other stuff } </script> </head> <body bgcolor="#FDF9CF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table id="Table_01" width="900" height="1501" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="images/Tots_01.jpg" width="563" height="38" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/Tots_02.jpg" width="337" height="213" alt=""></td> </tr> <tr> <td colspan="6"> <img src="images/Tots_03.jpg" width="563" height="175" alt=""></td> </tr> <tr> <td rowspan="8"> <img src="images/Tots_04.jpg" width="63" height="1287" alt=""></td> <td colspan="6"> <img src="images/Tots_05.jpg" width="775" height="37" alt=""></td> <td rowspan="8"> <img src="images/Tots_06.jpg" width="62" height="1287" alt=""></td> </tr> <tr> <td colspan="6" background="images/Tots_07.jpg" width="775" height="350" valign="top"> test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text </td> </tr> <tr> <td colspan="6"> <img src="images/Tots_08.jpg" width="775" height="50" alt=""></td> </tr> <tr> <td colspan="6" background="images/Tots_09.jpg" width="775" height="300" valign="top"> here is where we will write about why organic?</td> </tr> <tr> <td colspan="6"> <img src="images/Tots_10.jpg" width="775" height="38" alt=""></td> </tr> <tr> <td> <img src="images/Tots_11.jpg" width="37" height="75" alt=""></td> <td style="cursor: pointer;" onclick="tc.style.display='inline'; deliv.style.display='none'; returns.style.display='none';"> <img src="images/Price_active.jpg" width="107" height="75" alt="" name="Price_img" id="Price_img" onClick="javascript: activateSection('Price')"></td> <td style="cursor: pointer;" onclick="tc.style.display='none'; deliv.style.display='inline'; returns.style.display='none';"> <img src="images/Delivery_inactive.jpg" width="111" height="75" alt="" name="Delivery_img" id="Delivery_img" onClick="javascript: activateSection('Delivery')"></td> <td style="cursor: pointer;" onclick="tc.style.display='none'; deliv.style.display='none'; returns.style.display='inline';"> <img src="images/Returns_inactive.jpg" width="111" height="75" alt="" name="Returns_img" id="Returns_img" onClick="javascript: activateSection('Returns')"></td> <td colspan="2"> <img src="images/Tots_15.jpg" width="409" height="75" alt=""></td> </tr> <tr> <td colspan="6" background="images/Tots_16.jpg" width="775" height="337" valign="top"> <div> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="tc" name="tc"> <tr> <td width="775" height="337" valign="top">terms and conditions</td> </tr> </table> </div> <div> <table width="100%" style="display: none;" border="0" cellpadding="0" cellspacing="0" id="deliv" name="deliv"> <tr> <td width="775" height="337" valign="top">delivery info</td> </tr> </table> </div> <div> <table width="100%" style="display: none;" border="0" cellpadding="0" cellspacing="0" id="returns" name="returns"> <tr> <td width="775" height="337" valign="top">returns</td> </tr> </table> </div> </td> </tr> <tr> <td colspan="6"> <img src="images/Tots_17.jpg" width="775" height="100" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="63" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="37" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="107" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="111" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="111" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="134" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="275" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="62" height="1" alt=""></td> </tr> </table> </body> </html> Code (markup):
Your implementation that I tested on babyvalue.co.uk/nt/Tots.html seems to be mostly fine already ... with the only exception being that the Price tab is not deselected when you first click on Delivery or Returns. The fix for that was actually very simple ... simply initialize curActive to "Price" and it should all work. Good luck!