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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hiding HTML element (node) - improvement is needed

    Hi,

    I need to hide a paragraph when user clicks on a different paragraph. The code below works but seems to be little bit too complicated. Is there a more elegant way? Thank you!

    -----------------------------------------------------------------
    function hide(elementId)
    {
    var ourEle = document.getElementById(elementId);
    var parent = ourEle.parentNode;

    var blankEleP = document.createElement("p");
    var blankText = document.createTextNode("");
    blankEleP.appendChild(blankText);

    parent.replaceChild(blankEleP, ourEle);
    }

    <p onclick ="hide('hobbies');">HOBBIES</p>
    <p id="hobbies"> TEST TEST TEST</p>

    -----------------------------------------------------------------
    I used replaceChild instead of removeChild because eventually I want to do a toggle function. May be that is not a good enough reason. Well, what do you think?

  • #2
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I modified it to implement a toggle function. It hides the element but it does not recreate the element on a second click. How to make it to work?

    --------------------------------------
    var bHobbies = true;
    var nodeHobbies;
    var parentHobbies;

    function init()
    {
    nodeHobbies = document.getElementById("hobbies");
    parentHobbies = nodeHobbies.parentNode;
    }

    function toggle()
    {
    var blankEleP = document.createElement("p");
    var blankText = document.createTextNode("");
    blankEleP.appendChild(blankText);
    blankEleP.setAttribute( "id", "hobbies" );

    if(bHobbies)
    {
    bHobbies = false;
    parentHobbies.replaceChild(blankEleP, nodeHobbies);
    }
    else
    {
    bHobbies = true;
    parentHobbies.replaceChild(nodeHobbies, blankEleP);
    }
    }
    // end script -->
    </script>

    --------------------------------------
    <p onclick="toggle();">HOBBIES</p>

    <p id="hobbies">test</p>

    <script>
    init();
    </script>

    --------------------------------------

  • #3
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I don't know if this is at all less complicated (or an improvement), but since Moz returns a textnode for "nextSibling", this is all I could think of, for now...

    Code:
    <html>
    <body>
    <script type="text/JavaScript">
    function f(el){
    var  tgN = document.getElementsByTagName(el.tagName);
    for(var i = 0; i < tgN.length; i++){
    if(tgN[i] == el){ 
    var nextEl = tgN[i + 1]; 
    break;}
    }
    if(nextEl){
    var elStyle = nextEl.style;
    elStyle.display != "none" ? elStyle.display = "none" : elStyle.display = "block";}
    }
    </script>
    
    <p onclick="f(this)">testFunction</p>
    <p>test</p>
    </body>
    </html>
    Last edited by swmr; 05-08-2004 at 08:18 AM.
    hmm... ?

  • #4
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I really appreciate it!!!! It not only works (unlike my code) but it is more elegant too!


  •  

    Posting Permissions

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