www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] Need help with showing and hiding elements

  1. #1
    Join Date
    Feb 2010
    Posts
    30

    resolved [RESOLVED] Need help with showing and hiding elements

    Hello,
    I am trying to using JavaScript to show and hide elements and a clients page. I have it set up that it with show the element by clicking a link and the same element hides by clicking another link that appears with the element. However what I also need now is if the element is visible and I click another link to display a new element, I want the first one to hide again.
    I know that it is an 'if' statement; however I don't know what the code is. Can anyone help?
    Thanks

  2. #2
    Join Date
    Mar 2007
    Posts
    946
    You need to check and see what state the element is in and then do the opposite.

    Code:
    if (element == 'none') {
        //set element to display
    } else {
       // set element to not display set to none.
    }
    "Hippies.They're everywhere. They wanna save the earth, but all they do is smoke pot and smell bad."-Cartman

  3. #3
    Join Date
    Feb 2010
    Posts
    30
    That is what I thought hope when I put it in it doesn't seem to work.
    This is what I have for code:

    function showStuff(id) {
    if (element == 'none') {
    document.getElementById(id).style.display = 'block';
    } else {
    document.getElementById(id).style.display = 'none';
    }
    }
    function hideStuff(id) {
    document.getElementById(id).style.display = 'none';
    }

    ....
    <li><a href="#" onclick="showStuff('xp'); return false;">Introduction to Windows XP</a></li>
    <li><a href="#" onclick="showStuff('vista'); return false;">Introduction to Windows Vista</a></li>
    ....
    <span id="xp" style="display: none;">
    <p>Windows XP is an operating system that allows you to access other programs
    on the computer. This course is a beginner level course that teaches students
    how to navigate inside the operating system, manage files and general functions
    of the operating system.<a href="#" onclick="hideStuff('xp'); return false;">Close</a></p>
    </span>
    <span id="vista" style="display: none;">
    <p>Windows Vista was released between Windows XP and Windows 7 the latest operating system. A beginner level course that teaches students how to navigate inside the operating system, manage files and general functions of the operating system.<a href="#" onclick="hideStuff('vista'); return false;">Close</a></p>
    </span>

  4. #4
    Join Date
    Mar 2007
    Posts
    946
    I guess my explanation wasn't very good.


    You need to get the element style and check its value first.
    Code:
    function showStuff(id) {
    if (document.getElementById(id).style.display == 'none') {
    document.getElementById(id).style.display = 'block';
    } else {
    document.getElementById(id).style.display = 'none';
    }
    "Hippies.They're everywhere. They wanna save the earth, but all they do is smoke pot and smell bad."-Cartman

  5. #5
    Join Date
    Feb 2010
    Posts
    30
    Okay so that does it for that link, but what about if I click on another link, how do I make the old on vanish.
    So for example if I first click on Windows XP and it displays the info for it. So what I want to do is when I click on the Windows Vista, the Xp info hides and the Vista info displays.

  6. #6
    Join Date
    Feb 2010
    Posts
    1

    A slightly different take...

    I would use the following two JavaScript functions to hide and show the elemets:

    function hideAllInfo() {
    var aSpans = document.getElementsByTagName("span");
    for (i = 0; i < aSpans.length; i++) {
    aSpans[i].style.display = 'none';
    }
    }
    function showInfo(id) {
    hideAllInfo();
    document.getElementById(id).style.display = 'block';
    return false;
    }
    Then in the HTML I would do something like:
    <div>
    <a onclick="return showInfo('Google');">What is Google</a>
    </div>
    <div>
    <a onclick="return showInfo('Yahoo');">What is Yahoo</a>
    </div>
    <span id="Google" style="display:none">
    <div>Here would be some info about Google.</div>
    <a href="http://www.google.com">Go to Google</a>
    </span>
    <span id="Yahoo" style="display:none">
    <div>Here would be some info about Yahoo.</div>
    <a href="http://www.yahoo.com">Go to Yahoo</a>
    </span>
    When you click on a link the first thing the showInfo function does is call the hideAllInfo function. The hideAllInfo function resets all the information areas back to non-display. showInfo then sets the selected areas display property so it will display. The nice thing about this approch is that you can add as many links and information areas as you want without having to change the JavaScript code.

  7. #7
    Join Date
    Jan 2005
    Posts
    366
    One more little thing that you need to be aware of, is that the first time you try to read
    Code:
    style.display
    it will probably be empty, so you need to pay attention to your initial state.

  8. #8
    Join Date
    Feb 2010
    Posts
    30
    Thanks elbaz! That was exactly what I was looking for.

  9. #9
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by omnicity View Post
    One more little thing that you need to be aware of, is that the first time you try to read
    Code:
    style.display
    it will probably be empty, so you need to pay attention to your initial state.
    if you use "" instead of "block", you can ignore the initial state, and not screw up thing like table cells, links, and others that look funky with display:block;

    Code:
    function showInfo(id) {
        hideAllInfo();
        return document.getElementById(id).style.display = '';
    }

  10. #10
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    373
    I saw this in a Sudoku solver. SetPage is called with the div to be displayed and showPage either displays or hides the divisions.
    Code:
    function showPage(sPage, bShow)
    {
    	var div = document.getElementById(sPage);
    	div.style.visibility = bShow ? 'visible' : 'hidden';
    	div.style.position = bShow ? 'static' : 'absolute';
    }
    function setPage(sPage)
    {
    	showPage('start', sPage == 'start');
    	showPage('details', sPage == 'details');
    	showPage('solver', sPage == 'solver');
    	showPage('about', sPage == 'about');
    }

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