I am a beginner to html and in the below code , i have tried to hide and show contents using div blocks. I am able to hide/ show the second div block but on clicking the first div block it doesn't work! Dunno where it is going wrong. Any help would be appreciated.
<html>
<body>
<script type="text/javascript">
function hideshow(which)
{
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
<table>
<tr><td><a href="javascript:hideshow(document.getElementById('adiv1'))"><label class="menuOff" style="font-size: 35px;">Div block 1</label></a></td></tr>
<div id="adiv1" style="font:24px bold; display: none;">
<table>
<tbody>
<tr><td>Now you see me</td></tr>
<tr><td>Hello</td></tr>
</tbody>
</table>
</div>
<tr><td><a href="javascript:hideshow(document.getElementById('adiv'))"><label class="menuOff" style="font-size: 35px;">Div block 2</label></a></td></tr>
<div id="adiv" style="font:24px bold; display: none;">
<table>
<tbody>
<tr><td>Now you see me</td></tr>
<tr><td>Hello</td></tr>
</tbody>
</table>
</div>
</table>
</body>
</html>
I am a beginner to html and in the below code , i have tried to hide and show contents using div blocks. I am able to hide/ show the second div block but on clicking the first div block it doesn't work! Dunno where it is going wrong. Any help would be appreciated.
<html>
<body>
<script type="text/javascript">
function hideshow(which)
{
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
<table>
<tr><td><a href="javascript:hideshow(document.getElementById('adiv1'))"><label class="menuOff" style="font-size: 35px;">Div block 1</label></a></td></tr>
<div id="adiv1" style="font:24px bold; display: none;">
<table>
<tbody>
<tr><td>Now you see me</td></tr>
<tr><td>Hello</td></tr>
</tbody>
</table>
</div>
<tr><td><a href="javascript:hideshow(document.getElementById('adiv'))"><label class="menuOff" style="font-size: 35px;">Div block 2</label></a></td></tr>
<div id="adiv" style="font:24px bold; display: none;">
<table>
<tbody>
<tr><td>Now you see me</td></tr>
<tr><td>Hello</td></tr>
</tbody>
</table>
</div>
</table>
</body>
</html>
- jQuery slideToggle() – Milan and Friends Commented Dec 11, 2013 at 13:06
-
3
@mdesdev: this has absolutely nothing to do with why this code is not working and until the HTML is valid
slideToggle()won't be working either! – Nope Commented Dec 11, 2013 at 13:10 - @FrançoisWahl yeah, you're right ;) – Milan and Friends Commented Dec 11, 2013 at 13:13
-
2
@aarish: Check your code in the browser console, under the
elementtab you can see that your HTML has been altered pared to how you have it declared originally. the reason for this is thatdivtags cannot followtrtags and the browser is trying to do it's best guess work to correct it. Hence it moves the invaliddivs outside the tables. This might not be the same result between all browsers. Invalid HTML can be unpredictable at best. validator.w3/check is a great tool to validate your HTML. – Nope Commented Dec 11, 2013 at 13:15
6 Answers
Reset to default 6Your HTML is incorrect:
<table>
<tr><td><a href="javascript:hideshow(document.getElementById('adiv1'))"><label class="menuOff" style="font-size: 35px;">Div block 1</label></a></td></tr>
<!-- You can't have a div here -->
<div id="adiv1" style="font:24px bold; display: none;">
Did you mean to have another table row in there?
<tr>
<td>
<div id="adiv1" style="font:24px bold; display: none;">
</td>
</tr>
The same issue applies to the second div element
The problem isn't your javascript but your HTML, it's not valid. Your javascript, although a bit odd (why do you check if getElementById exist? You used it to call the function!), is OK.
The problem is that your DIVs are floating in the middle of two TR. A table structure is:
<table>
<tr> // a row
<td></td> // one cell
</tr> // end of a row
</table> end of table
What happens when you put stuff between Rows is undefined behavior. If you check your DOM in Chrome for instance, you'll see that your DIVs are actually empty and that the text (which you put in another table, my eyes..!) has 'escaped' out of them. And that's why it does nothing when you click: the style is updated, but there is nothing in it.
Funny thing: if you fix just the first DIV, the second DIV will start not working. It all depends on how the browser parse your invalid HTML and it's a bit random. Always close your tags, and always make sure you are following the basic structures... Like putting a TR within a UL instead of a LI (I have seen it.)
the structure of your html is:
<table> <!-- to delete -->
<div>
<table>
</table>
</div>
<div>
<table>
</table>
</div>
</table> <!-- to delete -->
It's not correct, when you remove the extra "table" tags it works fine
You have some errors on the tags nesting.
Here example with less tags.
two buttons, each hides/shows different div.
<!doctype html>
<!-- do not forget to declare type! -->
<html>
<head>
<title> Hide/show div</title>
<script type="text/javascript">
function HideShow(which)
{
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
</head>
<body>
<button onclick = 'HideShow(document.getElementById("div1"));'>Hide/Show div 1</button>
<div id='div1' style='display:block'>This data is in div 1</div>
<br>
<button onclick = 'HideShow(document.getElementById("div2"));'>Hide/Show div 2</button>
<div id='div2' style='display:block'>This data is in div 2</div>
</body>
</html>
I suggest you to look into the toggle function provided with the JQuery Framework.
http://api.jquery./toggle/
The main problem seems to be that your HTML is incorrect, you were putting a div within the table element, which made it an direct child.
This will ofcourse throw an major error.
I've made a JSFiddle example for you http://jsfiddle/mNDN2/
HTML:
<table>
<tr>
<td>
<label id="blockOne" class="menuOff" style="font-size: 35px;">Div block 1</label>
</td>
</tr>
<tr id="adiv1">
<td>asdfasdf</td>
</tr>
</table>
JS:
$("#blockOne").on('click', function () {
$("#adiv1").toggle();
});
CSS:
#adiv1 {
display: none;
}
try to remove the a tag and on div block, add
onclick="hideshow(document.getElementById('adiv'))"
If it's not working, use jquery. To get an element with jquery
$("#adiv1") for example
and to hide, do
$("#adiv1").hide()
to show:
$("#adiv1").show()