SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Location
    Upstate NY
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with Hiding and Showing a DIV

    Hi everybody,

    I was searching Google for a good/lightweight way to show and hide divs simultaneously. I stumbled upon a post here by paul_wilkins (in the link below) and it's exactly what I was looking for, except for one thing. I'm curious what I would have to tweak to show the content content in div id="one" when the page loads instead of both being hidden at start?

    I'm a rookie when it comes to JS and any help would be greatly appreciated.


    http://www.sitepoint.com/forums/show...=1#post4806399


    Here's the code I'm using from the link above...


    So finally, here's the CSS code for the test page:

    style.css
    Code:
    .hidden {
        display: none;
    }
    Here's the HTML code for the test page:

    index.html
    Code:
    <html>
    <head>
    <title>Hidden Div</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
    <div id="sections">
        <a href="#one">Show ONE</a>
        <a href="#two">Show TWO</a>
    </div>
    <div id="one">ONE.</div>
    <div id="two">TWO.</div>
    <script type="text/javascript" src="script.js"></script>
    </body>
    </html>
    And here's the script for the test page:

    script.js
    Code:
    function showSection() {
        var i;
        for (i = 0; i < links.length; i += 1) {
            document.getElementById(links[i].href.split('#')[1]).className = 'hidden';
        }
        document.getElementById(this.href.split('#')[1]).className = '';
        return false;
    }
    function createShowSection(links) {
        return showSection;
    }
    var sections = document.getElementById('sections'),
        links = sections.getElementsByTagName('a'),
        showSection = createShowSection(links),
        i;
    for (i = 0; i < links.length; i += 1) {
        links[i].onclick = showSection;
    }
    showSection();
    Thanks in advance!
    -Jeremy

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Jeremy. Welcome to the forums.

    I'm a noob at JS, but trying to learn, so after messing around a bit, I came up with a solution, though it's probably really inefficient. Hopefully the likes of @paul_wilkins or @Pullo can provide a better response.

    Anyhow, here's my stab:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    
    .hidden {
        display: none;
    }
    
    </style>
    	
    </head>
    <body>
    
    <div id="sections">
        <a href="#one">Show ONE</a>
        <a href="#two">Show TWO</a>
        <a href="#three">Show THREE</a>
        <a href="#four">Show FOUR</a>
    </div>
    
    <div id="one">ONE.</div>
    <div id="two">TWO.</div>
    <div id="three">THREE.</div>
    <div id="four">FOUR.</div>
    
    
    <script>
    function showSection() {
        var i;
        for (i = 0; i < links.length; i += 1) {
            document.getElementById(links[i].href.split('#')[1]).className = 'hidden';
        }
        document.getElementById(this.href.split('#')[1]).className = '';
        return false;
    }
    
    function createShowSection(links) {
        return showSection;
    }
    
    var sections = document.getElementById('sections'),
        links = sections.getElementsByTagName('a'),
        showSection = createShowSection(links),
        i;
        for (i = 0; i < links.length; i += 1) {
            links[i].onclick = showSection;
        }
    
    function init() {
        var i;
        for (i = 1; i < links.length; i += 1) {
            document.getElementById(links[i].href.split('#')[1]).className = 'hidden';
        }
    }
    
    init();
    
    </script>
    </body>
    </html>

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi Ralph,

    Good going!
    The only thing I would change about your solution is the fact that if the OP decides he wants to have a different panel open initially, he has to hunt through the code and find out where the open panel is set.
    It would therefore be easier if you could pass in the open panel as a parameter:

    Code JavaScript:
    showSection({open: one});

    I modified the code a little to reflect this:

    Code JavaScript:
    function showSection(opts) {
      var i;
      for (i = 0; i < links.length; i += 1) {
        var currLink = document.getElementById(links[i].href.split('#')[1]);
        if (currLink != opts.open){
          currLink.className = 'hidden';
        }
      }
      document.getElementById(this.href.split('#')[1]).className = '';
      return false;
    }
     
    function createShowSection(links) {
      return showSection;
    }
     
    var sections = document.getElementById('sections'),
        links = sections.getElementsByTagName('a'),
        showSection = createShowSection(links),
        i;
    for (i = 0; i < links.length; i += 1) {
      links[i].onclick = showSection;
    }
     
    showSection({open: two});

    I notice that the code is from the beginning of 2011, so it will be interesting to see if Paul has anything to add.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Ooh, nice improvement, Pullo. Is {open: two} and object literal? That's the only thing that code reminds me of. If so, it's interesting that you can use one as an argument. (I've only ever seen one explicitly assigned to a variable.)

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Location
    Upstate NY
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    You guys rock!

    ralph.m, that was a great workaround! And a fine the assist by Pullo too. I really appreciate your help and the warm welcome to boot. I know the code was a bit old but for my needs but now this works perfectly for what I need. If you guys ever need a graphic design help sometime, don't hesitate to let me know.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You're welcome. Glad we could help. This is a pretty friendly place, so do come back any time.

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Location
    Upstate NY
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You're welcome. Glad we could help. This is a pretty friendly place, so do come back any time.
    Oh I plan on sticking around, I've been digging through threads all night. There's a lot of good stuff here for a beginner like myself. Hopefully I can contribute as well. Cheers!

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Is {open: two} an object literal?
    Aye, 'tis that.
    https://developer.mozilla.org/en/doc...bject_literals

    Quote Originally Posted by ralph.m View Post
    If so, it's interesting that you can use one as an argument. (I've only ever seen one explicitly assigned to a variable.)
    This is a common technique for passing configuration parameters to (for example) jQuery plugins.

    We could have written showSection("one"); and achieved the same thing.
    Using an object just makes it a little more readable.
    In fact thinking about it, it would have been better to call it "openDiv" or "openPanel" or something ...

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Pullo View Post
    I notice that the code is from the beginning of 2011, so it will be interesting to see if Paul has anything to add.
    It can be interesting going on an archeological dig of your own past code - I'll see if I can block out some free time today to do so.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    It can be interesting going on an archeological dig of your own past code - I'll see if I can block out some free time today to do so.
    Cool

    One thing that might be worth looking at is the fact that this line:

    Code JavaScript:
    document.getElementById(this.href.split('#')[1]).className = '';

    causes this error:

    Code:
    Uncaught TypeError: Cannot call method 'split' of undefined
    the first time the code runs, as this initially points to the global window object.

    On every subsequent execution, it points to the link which was clicked.


Bookmarks

Posting Permissions

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