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

    Changing content within a page

    Hi,

    I want to be able to show some content, while at the same time hide some other content using JS. Can anyone help me with this?

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Can you please post some more details on the content and the page to be able to help you in an accurate way.

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Sorry if I wasn't clear.

    For example:

    Code:
    [a button here]
    
    [some text here, showing (lets call this text 1) ]
    
    [some text here, hidden (lets call this text 2)]
    and when you click the button

    Code:
    [a button here]
    
    [text 2 here, showing]
    
    [text 1 here, hidden]
    If i am being confusing, please let me know. Thanks for the help!

  • #4
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    You put your text in an html tag <label id='label1'> and <label id='label2'> for example.
    when you click on the button set a function named btnClicked() like this:

    Code:
    function btnClicked()
    {
       document.getElementById("label1").style.display = "";
       document.getElementById("label2").style.display = "none";
    }

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks very much for your reply! Luckily, I found some code that worked perfectly for me!

    Code:
    <html>
    <head></head>
    <body>
    
    <div>
      <!--put your links here-->
      <a href=#stayhere id=a1 onclick="showhide(this.id);">first link</a>
      <a href=#stayhere id=a2 onclick="showhide(this.id);">second link</a>
      <a href=#stayhere id=a3 onclick="showhide(this.id);">third link</a>
      <!--end where you put your links-->
      <div>
      <!--put all your divs here-->
        <div id=a1div style="display:none;background-color:red;width=100px;height=100px;">first div</div>
        <div id=a2div style="display:none;background-color:blue;width=100px;height=100px;">second div</div>
        <div id=a3div style="display:none;background-color:green;width=100px;height=100px;">third div</div>
      <!--end where you put your divs-->
      </div>
    </div>
    
    </div>
    
    <script type=text/javascript>
    function showhide(Id){
    var Par=document.getElementById(Id).parentNode;
    var count='3'
    i='0';
    while(i<=count){
    var childlngth=Par.childNodes.length-1;
    Par.childNodes[childlngth].childNodes[i].style.display="none";
    i++;
    }
    document.getElementById(Id+"div").style.display="block";
    }
    
    </script>
    
    </body>
    </html>
    Thanks again for all of your help!


  •  

    Posting Permissions

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