SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hide/show divs simultaneously

    Hello all!
    I have 2 things that I want to show/hide using JS.

    Code:
    <html>
    <head>
    <title>Hidden Div</title>
    <script language="JavaScript">
    function showstuff(boxid){
       document.getElementById(boxid).style.visibility="visible";
    }
    
    function hidestuff(boxid){
       document.getElementById(boxid).style.visibility="hidden";
    }</script>
    </head>
    <body>
    
    	<a href="#" onclick="showstuff('one'); hidestuff('two');">Show ONE</a>
    	<a href="#" onclick="showstuff('two'); hidestuff('one');">Show TWO</a>
    
    <div id="one" style="display:none" >ONE.</div>
    <div id="two" style="display:none">TWO.</div>
    </body>
    </html>
    If I use it as it is I don't see anything!
    If I don't use style="display:none" inside the divs, I see them both initially and I can hide/show each one depending on which link I press. But the thing is that I need both divs to be hidden in the first place, and when I click on ONE, to show TWO, when I click on TWO to hide ONE and show TWO etc. Each time 1 div should be visible, depending on which link we press. The other must disappear.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need to stop the page from following the links, so put 'return false' at the end of each onclick attribute

    Also you'll need to use style.display='none' and style.display='' (tested in Chrome)

    (Just to make the code a bit neater, it could be worth putting those onclick lines into separate functions)

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Inline CSS and inline events

    Remove the inline CSS and inline events. Set up the HTML code so that it works when scripting and/or CSS are not available. You can easily achieve that by using fragment identifiers as the links to the different sections.

    Code html4strict:
    <a href="#one">Show ONE</a>
    <a href="#two">Show TWO</a>
    <div id="one">ONE.</div>
    <div id="two">TWO.</div>

    Now modify that so that scripting can easily access and work with the links

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

    Attach an onclick event on to each of the links

    Code javascript:
    var sections = document.getElementById('sections'),
        links = sections.getElementsByTagName('a'),
        i;
    for (i = 0; i < links.length; i += 1) {
        links[i].onclick = showSection;
    }

    The showSection function will handle the task of hiding the other sections, and showing the one that was clicked on.
    The link that triggered the onclick event will be referenced by the this keyword

    Code javascript:
    function showSection() {
        var sections = document.getElementById('sections'),
            links = sections.getElementsByTagName('a'),
            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;
    }

    As we are adding and clearing a class name of hidden, we'll want that to be defined in our CSS file

    Code CSS:
    .hidden {
        display: none;
    }

    And lastly, to hide all of the sections when you start, you can just run the showSection() function without link being referenced.

    Code javascript:
    showSection();

    That works, but there is some duplication of the links variable. Both the section variable and the links variable are separately created. Once when attaching the onclick events, and again each time the showSection function is invoked.

    To resolve that, you can use a createShowSection function that accepts the links variable, and returns the showSection function.

    Code javascript:
    function createShowSection(links) {
        return showSection;
    }

    Now you can use that function when assigning the onclick events, which allows the showSection function to know about the links array

    Code javascript:
    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;
    }

    We can now remove sections and links from the showSection function, and things are more streamlined.

    Code javascript:
    function showSection() {
        var i;
        ...
    }

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

    style.css
    Code CSS:
    .hidden {
        display: none;
    }

    Here's the HTML code for the test page:

    index.html
    Code html4strict:
    <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 javascript:
     
    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();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •