www.webdeveloper.com
Results 1 to 11 of 11

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

  1. #1
    Join Date
    Jul 2014
    Posts
    2

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

    Hi there.

    Ive 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 :

    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:

    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";
    
    }

  2. #2
    Join Date
    Mar 2012
    Posts
    1,816
    Amend the Javascript code:

    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";
    }

  3. #3
    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.

    Code:
    	<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>
    Code:
    @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.
    Last edited by deathshadow; 07-20-2014 at 07:34 PM.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435

    Question

    @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?

    Code:
    <!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>

  5. #5
    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.

    Code:
    .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?

  6. #6
    Join Date
    Jul 2014
    Posts
    2
    deathshadow thank you very much for the help. It is a very nice trick.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435
    Quote Originally Posted by deathshadow View Post
    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.

    Code:
    .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.


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

    Code:
    <!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.
    Last edited by deathshadow; 07-25-2014 at 05:40 AM.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435
    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.

  10. #10
    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..."

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435
    Thanks...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles