This site is best viewed in a modern browser with JavaScript enabled.

Show/Hide Divs - Almost there but still an issue to solve

FabioM

Hi there.

I´ve a menu that shows content in a div after the user clicks on the corresponding link but the div actually showing up doesnt dissapear when the user clicks another link.

How do i do to make the displayed div to hide when the user clicks another link?

Here is the HTML code :

<script type="text/javascript" src="altera_display.js"></script>

</head>
<body>
         <nav>
         <ul>
                 <li><a href="#" onclick="javascript: altera_display('Div01');">Sobre</a></li>
                 <li><a href="#" onclick="javascript: altera_display('Div02');">Top5</a></li>
                 <li><a href="Historia.html">Historia dos Caminhos de ferro</a></li>
                 <li><a href="#">Pelo Mundo</a>
                         <ul>

                             <li><a href="#">Europa</a> </li>
                             <li><a href="#">Asia</a> </li>
                             <li><a href="#">Oceania</a> </li>
                             <li><a href="#">Africa</a> </li>
                             <li><a href="#">America do Norte</a> </li>
                             <li><a href="#">America do Sul</a> </li>
                     </ul>
             </li>
             <li><a href="Factos.html">Factos</a> </li>
     </ul>
     </nav>


     <div id="Div01" style="display: none">Content Div</div>
     <div id="Div02" style="display: none">Content Div</div>
</body>
</html>

And here is the Javascript code:

function altera_display(id) {
if(document.getElementById(id).style.display=="none") {
         document.getElementById(id).style.display ="block";
}
else
         document.getElementById(id).style.display ="none";

}

jedaisoul

Amend the Javascript code:

function altera_display(id) {
if(id=="Div01") {
         document.getElementById("Div01").style.display ="block";
         document.getElementById("Div02").style.display ="none";
}
else
         document.getElementById("Div01").style.display ="none";
         document.getElementById("Div02").style.display ="block";
}

deathshadow

1) onclick is javascript, you don't say "javascript:" inside it. You're thinking href.

2) you don't actually need JS to do this anymore. If you use :target you can skip scripting entirely -- doesn't work in IE9/earlier, but if you put the CSS to hide the element inside a media query, you can simply make both show on the older crappy browsers.

	<a href="#Div01">Sobre</a><br />
	<a href="#Div02">Top5</a>

<div id="Div01" class="targetHide">Content Div</div>
<div id="Div02" class="targetHide">Content Div</div>

@media (min-width:1px) { /* cute trick to target modern browsers only */
	.targetHide { display:none; }
	.targetHide:target { display:block; }
}

No scripting needed. Will also scroll to the content when the user clicks on the link.

JMRKER

@deathshadow

Just playing around again ...
That seems to work pretty good until you use a border and then try to clear it later.
Any comments other than to not use a border?


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<title> HTML5 page </title>
<style type="text/css">
@media (min-width:1px) { /* cute trick to target modern browsers only */

.targetHide { display:none; }   /* border:1px solid transparent; } /* doesn't work */
.targetHide:target { display:block; border:1px solid red; }
}
</style>

</head>
<body>
  <a href="#Div00">Clear</a>
  <a href="#Div01">Div 1</a>
  <a href="#Div02">Div 2</a>
  <p>
  <div id="Div00" class="targetHide"></div>
  <div id="Div01" class="targetHide">Content Div 1</div>
  <div id="Div02" class="targetHide">Content <br>Div <br>2</div>
</body>
</html>

deathshadow

What exactly is it doing, and in which browser? None is none, you shouldn't have to 'clear' any border or anything...

Though really, the ONLY thing you should set on :target is the display:block; everything else can be on the none state since none means none.

.targetHide {
  display:none;
  border:1px solid #F00;
}

.targetHide:target {
  display:block;
}

Should work fine.

Oh, unless you're trying to make none show / "clear" it... in which case you don't make a DIV for that... you use just:

<a href="#">Close all boxes</a>

as a empty reference doesn't scroll anywhere, but removes the target state. Is that what you were trying to do with that #DIV00?

FabioM

deathshadow thank you very much for the help. It is a very nice trick.

JMRKER

deathshadow;1348043 wrote:
What exactly is it doing, and in which browser? None is none, you shouldn't have to 'clear' any border or anything...

Though really, the ONLY thing you should set on :target is the display:block; everything else can be on the none state since none means none.
.targetHide {
  display:none;
  border:1px solid #F00;
}

.targetHide:target {
  display:block;
}
Should work fine.

Oh, unless you're trying to make none show / "clear" it... in which case you don't make a DIV for that... you use just:

<a href="#">Close all boxes</a>

as a empty reference doesn't scroll anywhere, but removes the target state. Is that what you were trying to do with that #DIV00?

I run the code at post #4 as is.
Noticed 1st on FF on iMac at work.
Just checked again at home with Windows OS using FF and Chrome browsers.
Same result on all.

1st execution gives clear screen except for 3 link choices.

Clicking "Div 1" shows red box around single line.
Clicking "Div 2" shows red box around 3 lines
Clicking "Clear" shows only a single straight red line (collapsed border with no height).

I was expecting the "Clear" link to restore to initial display, ie; No display of "Div00" element.
Post #4 shows what I tried with the border commented out. Uncomment to see same results as above.

Note: I believe you, the element should be gone (none is none), but it seems to leave a residual red line
as if it were a <hr> tag when the "Clear" link is selected.

deathshadow

You want nothing shown, don't have that empty DIV!

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />

<title>
	Show/Hide Demo
</title>

<style type="text/css">

@media (min-width:1px) { /* cute trick to target modern browsers only */

.targetHide {
	display:none;
	border:1px solid red;
}

.targetHide:target {
	display:block;
}

} /* @media (min-width:1px) */

</style>

</head><body>

<div>
	<a href="#">Clear</a>
	<a href="#Div01">Div 1</a>
	<a href="#Div02">Div 2</a>
</div>

<div id="Div01" class="targetHide">Content Div 1</div>
<div id="Div02" class="targetHide">Content <br>Div <br>2</div>

</body></html>

That empty DIV is likely what's showing. That's what you're trying to do, right? Oh, and your unclosed/malformed use of P in a modern doctype and anchors as children of BODY (which isn't valid) could contribute to issues, though really browsers are ridiculously forgiving about that.

JMRKER

The empty DIV was the problem.
Thanks for the look and comments.

I'll try to remember about closing the <p> tag.
I've always had a problem knowing which tags need to be closed,
expecially <p> and <br> on which DOCTYPES.

deathshadow

Tags that you don't have closures like </p> are called "empty" tags in the specification... and that's a confusing mess because <p></p> or <div></div> are NOT considered "empty" by the specifications. BR, IMG, META -- those are what they mean by "empty".

Confused? Precisely why I say the specifications legalese is a hefty chunk of the problem with people learning HTML. Royal pain in the...

Basically, it's not whether or not a tag contains content, but if it CAN contain content.

The official list of EMPTY tags as of HTML 4 are:
APPLET, AREA, BASE, BR, FRAME, HR, IMG, INPUT, ISINDEX, LINK, META, PARAM

There are also other tags like EMBED, but those are browser specific and really have no business in any code written after 1997, which of course is why EMBED is now magically allowed into HTML 5... :/

When using XHTML, these are the tags you have to close with />, and are the ONLY tags it is valid to close that way.

When in doubt, go to a good reference like this one:
http://htmlhelp.com/reference/html40/

Go to HR for example:
http://htmlhelp.com/reference/html40/block/hr.html

You'll see it says "contents:empty"

Go to P:
http://htmlhelp.com/reference/html40/block/p.html

You'll see "contents:inline elements" -- which is why it's invalid to put a P inside a P, or a DIV inside a P, and why you're supposed to close your P to clearly mark the beginning and end of a grammatical paragraph.

HTML 5 is TRYING to throw the structural rules out the window so you can nest things any-old-way -- it's turning into a train wreck of ineptitude because browser support even in allegedly HTML 5 compliant browsers is a mess. Across several dozen forums you'll find people asking "why doesn't this work" where they like have an anchor around a heading or paragraph, and when you say "You can't put block level inside inline-level" they go "but HTML 5 says it's ok..."

JMRKER

Thanks...