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 7 of 7

Thread: Show/Hide Div

  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show/Hide Div

    Hey guys,

    I've been looking for an unobtrusive way, to have 3 links, and 3 divs. The first div will show, and when clicking the other two links, the 1st div gets replaced with either the 2nd or 3rd div depending on which link you click. the first div reappears after the first link is clicked.

    now i've found a way to do this, grant it it works just ok, but, my particular page has 5 sets of what i want above.

    is there an easy way to do this? or am i going to end up having like, 5 different array's and a bunch of different functions?

    Need help very much!

    thanks

    frankie

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    If you give your div ids such as div0, div1, div2... You could do something like this

    Code:
    function ShowHideDiv(idNum){
      for(var i=0;i<5;i++){
        document.getElementById("div" + i).style.display = "none";
      }
      document.getElementById("div" + idNum).style.display = "block";
    }
    Where you pass in the div you want to show eg ShowHideDiv(3);

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure if I made any sense with my first post. Either I made no sense or I am retarded and do not understand what you wrote, Eric.

    Here's an example.

    Code:
    Link #1 - Link #2 - Link #3
    -------------------------
    <div>Here is some content! Here is some content! Here is some content!</div>
    
    Link #1 - Link #2 - Link #3
    -------------------------
    <div>Here is some content! Here is some content! Here is some content!</div>
    
    Link #1 - Link #2 - Link #3
    -------------------------
    <div>Here is some content! Here is some content! Here is some content!</div>
    
    Link #1 - Link #2 - Link #3
    -------------------------
    <div>Here is some content! Here is some content! Here is some content!</div>
    
    Link #1 - Link #2 - Link #3
    -------------------------
    <div>Here is some content! Here is some content! Here is some content!</div>
    Now I need each of those links, to change out the div underneath its section. The code I was using before, hides the other div's when you click one link, except in my case it was hiding ALL of the div's on the page....


  • #4
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    i think this is what you are looking for:

    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>
      <!--put your links here-->
      <a href=#stayhere id=a4 onclick="showhide(this.id);">first link</a>
      <a href=#stayhere id=a5 onclick="showhide(this.id);">second link</a>
      <a href=#stayhere id=a6 onclick="showhide(this.id);">third link</a>
      <div>
      <!--put all your divs here-->
        <div id=a4div style="display:none;background-color:red;width=100px;height=100px;">first div</div>
        <div id=a5div style="display:none;background-color:blue;width=100px;height=100px;">second div</div>
        <div id=a6div style="display:none;background-color:green;width=100px;height=100px;">third div</div>
      <!--end where you put your divs-->
      </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>

    just be sure that every link has its own unique id and that what ever div you want to show when clicked on that link has that value and div in its id.

    i.e.:<a href=#stayhere id=a1>first</a>
    <div id=a1div></div>

    do not give any two elements the same id value.
    Last edited by brandonH; 11-03-2006 at 05:45 PM. Reason: correction
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #5
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    After adding quotes and fixing html errors I keep getting this

    Code:
    Par.childNodes[childlngth].childNodes[i] has no properties
    in my Javascript console (firefox).

  • #6
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    please post the whole source code for me please. maybe one of your corrections causes the script to not find the childNode. I would like to inspect the source to see if this is the case.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #7
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <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>
    </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;">first div</div>
        <div id="a2div" style="display:none;">second div</div>
        <div id="a3div" style="display:none;">third div</div>
      <!--end where you put your divs-->
      </div>
    </div>
    
    
    <div>
      <!--put your links here-->
      <a href="#stayhere" id="a4" onclick="showhide(this.id);">first link</a>
      <a href="#stayhere" id="a5" onclick="showhide(this.id);">second link</a>
      <a href="#stayhere" id="a6" onclick="showhide(this.id);">third link</a>
      <div>
      <!--put all your divs here-->
        <div id="a4div" style="display:none;">first div</div>
        <div id="a5div" style="display:none;">second div</div>
        <div id="a6div" style="display:none;">third div</div>
      <!--end where you put your divs-->
      </div>
    </div>
    
    
    
    </body>
    </html>


  •  

    Posting Permissions

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