Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    72
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Show/Hide Div with default?!?

    I'm trying to make one div default open, and that is working ok, but when I hit the link for the the other div to open, the first div is not closing... It closes when I hit the link for the first div...
    Code:
    var currentShowingDiv = document.getElementById('idShowHide1');
        function doHideShow3(divName){   
                    var objDiv = document.getElementById(divName);   
                    if (currentShowingDiv && currentShowingDiv != objDiv) { 
                        currentShowingDiv.style.display = 'none';
                    }
                    if(objDiv.style.display == ''){       
                        objDiv.style.display = 'none';
                    } else {       
                        objDiv.style.display = '';   
                        currentShowingDiv = objDiv;
                    }
                }
    Here is the php:
    PHP Code:
    include_once "js/showhide_report.php";

    echo 
    '<a href="javascript:void(null);" onclick="doHideShow3(\'idShowHide1\');">Div 1</a> | ';
    echo 
    '<a href="javascript:void(null);" onclick="doHideShow3(\'idShowHide2\');">Div 2</a><br><br>';

    echo 
    '<div id="idShowHide1" style="padding:0px 0px 25px 0px;width:100%x;">';
    echo 
    'Show something here for DIV 1';
    echo 
    '</div>';

    echo 
    '<div id="idShowHide2" style="padding:0px 0px 25px 0px;width:100%x;display:none;">';
    echo 
    'Show something here for DIV 2';
    echo 
    '</div>'
    So just to clarify what I want is to have one div open as default (idShowHide1) and when the user hits the link for the second div (idShowHide2) the first div close and the other open... As it is now the first div does not close...

    Hoping for help ;-)

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Place the script after the both divs in the document.
    I am still learning English

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    An unrelated question: javascript:void(null);
    What is that supposed to do?

  • #4
    New Coder
    Join Date
    Jul 2009
    Posts
    72
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ahhh... Thanks... Did the job ;-)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,013
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by VIPStephan View Post
    An unrelated question: javascript:void(null);
    What is that supposed to do?
    See:- http://www.tizag.com/javascriptT/javascriptvoid.php

    But same effect as <a href="#"

    "Merely corroborative detail, intended to add artistic verisimilitude to an otherwise bald and unconvincing narrative". W S Gilbert

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Well, of course I know how to use a search engine. This was more of a rhethorical question because actually I wanted to make the OP think why he would use such an outdated and “dirty” method.

    If something is supposed to do nothing, why executing it at all in the first place? A much cleaner method is to use the onclick event and return false. However, this poses the question: If you have an anchor without any location to refer to, why use an anchor in the first place? Wouldn’t the anchor itself be useless if it isn’t linking anywhere? So, that’s why one could use any element and the onclick event, and style it with CSS to make it look like one can click it.

    It’s all about semantics.


  •  

    Posting Permissions

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