pixelgirl Posted April 8, 2008 Share Posted April 8, 2008 Hi, I am looking at an example (see code below) that will show/hide sections of code when a checkbox is ticked. I cannot get the example to work with my code. Im probably doing something really stupid, but ive been trying to make it work for ages and I cant get anywhere. Any help would be appreciated example code: <html> <head> <title> </title> <script> function showMe (it, box) { var vis = (box.checked) ? "block" : "none"; document.getElementById(it).style.display = vis; } </script> </head> <body> <input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox <div id="div1" style="display:none"> <h3 align="center"> This JavaScript shows how to hide divisions </h3> <table border=1 id="t1"> <tr> <td>i am here!</td> </tr> </table> </div> <form> </form> </body> </html> the code above works. my code: <script language="JavaScript"> function showMe (it, box) { var vis = (box.checked) ? "block" : "none"; document.getElementById(it).style.display = vis; } </script> . . . . <tr> <td colspan = "2"><input type="checkbox" name="showHideBreeds" onclick="showMe('div1', this)"><p class="text3">All Breeds</p></td> </tr> <div id="div1" style="display:none"> <tr> <td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Akhal Teke"><p class="text3">Akhal Teke</p></td> <td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Andalusian"><p class="text3">Andalusian</p></td> <td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Anglo Arab"><p class="text3">Anglo Arab</p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" name="breeds[]" value = "Welsh Section D"><p class="text3">Welsh Section D</p></td> <td colspan = "2"><input type="checkbox" name="breeds[]" value = "Unknown"><p class="text3">Unknown</p></td> </tr> </div> if anyone can tell me where I am going wrong it would be greatly appreciated. I think the issue is that im trying to get the code to work within another table? Quote Link to comment https://forums.phpfreaks.com/topic/100101-solved-showhide-sections-of-table-when-checkbox-is-ticked/ Share on other sites More sharing options...
Cosizzle Posted April 8, 2008 Share Posted April 8, 2008 Hmm worked for me <html> <head> <title> </title> <script language="JavaScript"> function showMe (it, box) { var vis = (box.checked) ? "block" : "none"; document.getElementById(it).style.display = vis; } </script> </head> <body> <tr> <td colspan = "2"><input type="checkbox" name="showHideBreeds" onclick="showMe('div1', this)"><p class="text3">All Breeds</p></td> </tr> <div id="div1" style="display:none"> <tr> <td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Akhal Teke"><p class="text3">Akhal Teke</p></td> <td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Andalusian"><p class="text3">Andalusian</p></td> <td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Anglo Arab"><p class="text3">Anglo Arab</p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" name="breeds[]" value = "Welsh Section D"><p class="text3">Welsh Section D</p></td> <td colspan = "2"><input type="checkbox" name="breeds[]" value = "Unknown"><p class="text3">Unknown</p></td> </tr> </div> </body> </html> I added the HTML tags, and took away some of the '.' just below the <script> tag. Hope that helped Best of luck! Quote Link to comment https://forums.phpfreaks.com/topic/100101-solved-showhide-sections-of-table-when-checkbox-is-ticked/#findComment-511841 Share on other sites More sharing options...
pixelgirl Posted April 8, 2008 Author Share Posted April 8, 2008 if i put the code you just posted in a different file it works for me too but still not in my original file. Ok, looking at it again, it seems to be the table tags that are the problem. The code below doesnt work, but if you remove the table tags it does (for me anyway.) I am using this code within a table so i need it to work within the table tags. Can anyone give any suggestions? <html> <head> <title> </title> <script language="JavaScript"> function showMe (it, box) { var vis = (box.checked) ? "block" : "none"; document.getElementById(it).style.display = vis; } </script> </head> <body> <table> <tr> <td width="100"> </td> </tr> <tr> <td><p class="text3"><b>Locations to include in search:</b></p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" hidden name="locations[]" onclick="showMe('div1', this)" value = "All Locations"><p class="text3">All Locations</p></td> <div id="div2" style="display:none"> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "Greater London"><p class="text3">Greater London</p></td> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "South West England"><p class="text3">South West England</p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "South East England"><p class="text3">South East England</p></td> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "The Midlands"><p class="text3">The Midlands</p></td> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "North East England"><p class="text3">North East England</p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "North West England"><p class="text3">North West England</p></td> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "East Anglia"><p class="text3">East Anglia</p></td> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "Scotland"><p class="text3">Scotland</p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "Northern Ireland"><p class="text3">Northern Ireland</p></td> <td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "Wales"><p class="text3">Wales</p></td> </tr> </div> </table> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/100101-solved-showhide-sections-of-table-when-checkbox-is-ticked/#findComment-511851 Share on other sites More sharing options...
pixelgirl Posted April 8, 2008 Author Share Posted April 8, 2008 OK, I have now got it working when the hidden bit is enclosed in a seperate table. However, when the hidden bit is unhidden it does not appear below the checkbox to unhide it, but on the right of the rest of my code even though i have the property align="left" for both tables. If you put the below code in to a page and run it youll see what I mean. This is really irritating as it looks very bad, so could anyone suggest any layout ideas which would make it appear in the correct area of my page? Any help is appreciated the code is: <html> <head> <script language="JavaScript"> function ReverseDisplay(d) { if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } else { document.getElementById(d).style.display = "none"; } } </script> </head> <body> <form method="post" name="frmMatchMain" id="frmMatchMain"> <table width="100" align="left" cellspacing = "7"> <tr> <td><p class="text3"><b>Locations to include in search:</b></p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" checked = "true" onclick="javascript:ReverseDisplay('Location')" value = "AllLoc"><p class="text3">All Locations</p></td> </tr> </taBLE> </form> <div id = "Location" style="display: none;"> <form method="post" name="frmMatchLocation" id="frmMatchLocation"> <table width="100" align="left" cellspacing = "7"> <tr> <td colspan = "2"><input type="checkbox" name="locations[]" value = "Greater London"><p class="text3">Greater London</p></td> <td colspan = "2"><input type="checkbox" name="locations[]" value = "South West England"><p class="text3">South West England</p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" name="locations[]" value = "South East England"><p class="text3">South East England</p></td> <td colspan = "2"><input type="checkbox" name="locations[]" value = "The Midlands"><p class="text3">The Midlands</p></td> <td colspan = "2"><input type="checkbox" name="locations[]" value = "North East England"><p class="text3">North East England</p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" name="locations[]" value = "North West England"><p class="text3">North West England</p></td> <td colspan = "2"><input type="checkbox" name="locations[]" value = "East Anglia"><p class="text3">East Anglia</p></td> <td colspan = "2"><input type="checkbox" name="locations[]" value = "Scotland"><p class="text3">Scotland</p></td> </tr> <tr> <td colspan = "2"><input type="checkbox" name="locations[]" value = "Northern Ireland"><p class="text3">Northern Ireland</p></td> <td colspan = "2"><input type="checkbox" name="locations[]" value = "Wales"><p class="text3">Wales</p></td> </tr> </table> </form> </div> <body> Quote Link to comment https://forums.phpfreaks.com/topic/100101-solved-showhide-sections-of-table-when-checkbox-is-ticked/#findComment-512213 Share on other sites More sharing options...
pixelgirl Posted April 8, 2008 Author Share Posted April 8, 2008 managed to get it fixed by nesting all the tables within a main table. Quote Link to comment https://forums.phpfreaks.com/topic/100101-solved-showhide-sections-of-table-when-checkbox-is-ticked/#findComment-512257 Share on other sites More sharing options...
Cosizzle Posted April 8, 2008 Share Posted April 8, 2008 Pixelgirl, before getting to carried away with tables and to save you from a few nightmares I suggest reading up on CSS. It will change the way you write websites forever... well until something better comes along But in general practice most web developers will do almost anything to avoid using a table Quote Link to comment https://forums.phpfreaks.com/topic/100101-solved-showhide-sections-of-table-when-checkbox-is-ticked/#findComment-512413 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.