Hide and show

sandy1028

Hi,

I tried this code make it both Internet and mozilla compactibility but no luck. This code works in IE and not in Firefox. How to make it both compactible.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Content Viewer</title>
<style type="text/css">
    body {font-size:14px;line-height:18px;}
    h2 {cursor:pointer;font-size:16px;font-family:Trebuchet MS;margin-left:10px;line-height:10px;}
    div.block {margin-left:30px;}
    li {margin-top:2px;font-family:Trebuchet MS;}
</style>

</head>

<body>
<script type="text/javascript">
    function openFull(el){
        el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
    }
</script>

<h2 onclick="openFull(this)">Click here</h2>
<div class="block">
    <h3>Supported browsers</h3>
    </div>
</div>
</body>
</html>

Weedpacket

In Firefox, as per standard, there is a text node between the end of the h2 element and the div that contains the linebreak you've got between them. That's the "nextSibling" you're trying to change the style of (and text nodes don't have styles). Search for '"empty text nodes" Firefox' for more information.

Here's an alternative, which also includes simplifying the conditional operator and moving the script block back up into the head of the document. It also allows the heading and the div to be arbitrarily located; if you do require DOM-relative navigation, your code will need to loop through the node's siblings to find an element node (instead of a text node, or an entity node, or a comment node, or ....)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Content Viewer</title>
<style type="text/css">
    body {font-size:14px;line-height:18px;}
    h2 {cursor:pointer;font-size:16px;font-family:Trebuchet MS;margin-left:10px;line-height:10px;}
    div.block {margin-left:30px;}
    li {margin-top:2px;font-family:Trebuchet MS;}
</style>
<script type="text/javascript">
function openFull(el){
	el = document.getElementById(el);
    el.style.display = (el.style.display=='none') ? 'block' : 'none';
}
</script>
</head>
<body>
<h2 onclick="openFull('supported-browsers')">Click here</h2>
<div class="block" id="supported-browsers">
    <h3>Supported browsers</h3>
    </div>
</div>
</body>
</html>

sandy1028

hi,

I have used this code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Content Viewer</title>
<style type="text/css">
    body {font-size:14px;line-height:18px;}
    h2 {cursor:pointer;font-size:16px;font-family:Trebuchet MS;margin-left:10px;line-height:10px;}
    div.block {margin-left:30px;}
    li {margin-top:2px;font-family:Trebuchet MS;}
</style>

</head>

<body>
<script type="text/javascript">
    function openFull(el){
       el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
    }
</script>
<div>
<h2 onclick="openFull(this)">Click here</h2><div class="block">
    <h3>Supported browsers</h3>
    </div>
</div>
</body>
</html>

When the page is opened <h3>Supported browsers</h3> should not be seen. on clicking the 'Click here' the suppported browser should be seen

nrg_alpha

I suspect the issue is with regards to your div with the class "block" assigned.
Looking at your css at the top of your page, there is nothing that tells the display to be none. So by default, this is visible. So you could assign the display of block to be none, then if the user clicks on the 'click here' link, have javascript access the display of this and set it to 'inline' or 'block' or whatever.

Of course, you have to ask yourself, what if the user doesn't have javascript enabled? Currently, your code snippet here does not support any non-javascript fallbacks.. remember, javascript should 'supplement' your page, not be the required part of a page.. which leads to this question.. if javascript is disabled, is that div "block" supposed to be displayed by default?

if so, then the better way would be to have your div "block's" display set to 'inline' or 'block' (or whatever display mode [other than none] you need, then have yourjavascript utilise window.onload to call a function that accesses the div "block" display and set it to none (which is then toggled using your onclick link). This way, if javascript is enabled, display is set to none (via window.onload and the function to do this). If javascript is not enabled, then since the default display is not none, it is viewable.

And of course, if you want the inverse, (div "block" isn't visible in the event javascript is not enabled), then simply set it in css to none, and simply have it visible via your onclick link.

Hope that made sense.

Cheers,

NRG