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

Thread: Toggle content

  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Toggle content

    Hi,

    I have this script which allows me to toggle between divs which works fine. What I need to ask is how I replace the content which is showing..... FAQ question #2, FAQ question #3 and so on with content containing paragraphs and images. Any help would be very much apreciated

    Code:
    <html>
    <head>
    <title>Multiple DIV</title>
    <style type="text/css">
    DIV.db {
      display:none;
      border : 1px solid blue;
      width : 400px;
      height : 400px;
    }
    
    img {border:none;}
    </style>
    <script type="text/javascript">
    function CreateDIV(n) {
      var str = '';
      for (i=0; i<n; i++) {
    //    str += '<DIV id="DB'+i+'" style="display:none; border: 1px solid blue">';
        str += '<DIV id="DB'+i+'" class="db">';
        str += 'FAQ question #'+(i+1)+'</DIV>';
      }
      document.write(str);
    }  
    function Toggle(IDS,n) {
      for (i=0; i<n; i++) { document.getElementById('DB'+i).style.display='none'; }
      document.getElementById('DB'+IDS).style.display = 'block';
    }
    </script>
    </head>
    <body onLoad="Toggle(0,10)">
    <a href='#' onClick="Toggle(0,10)">FAQ #1</a>
    <a href='#' onClick="Toggle(1,10)">FAQ #2</a>
    <a href='#' onClick="Toggle(2,10)">FAQ #3</a>
    <a href='#' onClick="Toggle(3,10)">FAQ #4</a>
    <a href='#' onClick="Toggle(4,10)">FAQ #5</a>
    <a href='#' onClick="Toggle(5,10)">FAQ #6</a>
    <a href='#' onClick="Toggle(6,10)">FAQ #7</a>
    <a href='#' onClick="Toggle(7,10)">FAQ #8</a>
    <a href='#' onClick="Toggle(8,10)">FAQ #9</a>
    <a href='#' onClick="Toggle(9,10)">FAQ #10</a>
    <p />
    <script type="text/javascript">
      CreateDIV(10);  // used only as a test -- fill in with useful information
    </script> 
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You're doing over-kill on the divs. Just track what you have visible and don't loop.

    Ie:
    Code:
    var current = 0;
    
    function Toggle(toTog) {
      obj = document.getelementById(toTog);
      if( obj ) { 
        if( current ) current.style.display = "none"; 
        obj.style.display = "block"; 
        current = obj; 
      }
    }
    Create links:

    <a href="javascript:Toggle('somethingToDo');">Click Here</a>
    <a href="javascript:Toggle('somethingToSee');">Click Here</a>

    Then it's as simple as creating a div.

    <div id="somethingToDo" style="display: none">Something to Do</div>
    <div id="somethingToSee" style="display: none">Something to See</div>
    Last edited by Sphynx; 05-11-2009 at 02:47 PM. Reason: Cleanup

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have tried what you suggested but it doesn't seem to work! I get an error:document.getelementById is not a function
    [Break on this error] obj = document.getelementById(toTog);

    Here is the code I have

    Code:
    <html>
    <head>
    <title></title>
    <style type="text/css">
    
    img {border:none;}
    
    #tab-nav {
    	margin: 0px 0 15px 275px;
    	padding: 0;
    	height:36px;
    	width:475px;
    	float: left;
    	list-style-type: none;
    	
    	}
    #tab-nav li {
    	float: left;
    }
    #tab-nav li a {
    	display: block;
    	height: 32px;
    	text-indent: -9999px;
    }
    
    #tab-nav li.facebook a {
    width:80px;
    height:36px;
    background:url(facebook-tab.gif);
    }
    
    #tab-nav li.facebook a.selected {
    width:80px;
    height:36px;
    background:url(facebook-tab-red.gif);
    }
    
    #tab-nav li.twitter a {
    width: 75px;
    height:36px;
    background:url(twitter-tab.gif);              
    }
    
    #tab-nav li.twitter a.selected {
    width: 75px;
    height:36px;
    background:url(twitter-tab-red.gif);              
    }
    #tab-nav li.picasa a {
    width: 65px;
    height:36px;
    background:url(picasa-tab.gif);              
    }
    
    #tab-nav li.picasa a.selected {
    width: 65px;
    height:36px;
    background:url(picasa-tab-red.gif);              
    }
    
    #tab-nav li.bookmarking a {
    width: 101px;
    height:36px;
    background:url(bookmarking-tab.gif);              
    }
    
    #tab-nav li.bookmarking a.selected {
    width: 101px;
    height:36px;
    background:url(bookmarking-tab-red.gif);                
    }
    
    #tab-nav li.youtube a {
    width: 76px;
    height:36px;
    background:url(youtube-tab.gif);              
    }
    
    #tab-nav li.youtube a.selected {
    width: 76px;
    height:36px;
    background:url(youtube-tab-red.gif);                
    }
    
    #tab-nav li.blogs a {
    width: 56px;
    height:36px;
    background:url(blogs-tab.gif);              
    }
    
    #tab-nav li.blogs a.selected {
    width: 56px;
    height:36px;
    background:url(blogs-tab-red.gif);                
    }
    
    #facebook {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #twitter {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #picasa {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #bookmarking {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #youtube {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    #blogs {display:none;
    position:relative;
    top:40px;
    left:-475px;}
    
    </style>
    <script type="text/javascript">
    var current = 0;
    
    function Toggle(toTog) {
      obj = document.getelementById(toTog);
      if( obj ) { if( current ) current.style.display = "none"; obj.style.display = "block"; current = obj; }
    }
    function applySelectedTo(link) {
      var ul = document.getElementsByTagName("ul")[0];
      var allLinks = ul.getElementsByTagName("a");
      for (var i=0; i<allLinks.length; i++) { 
        allLinks[i].className = ""; 
      }
      link.className = "selected"; 
    }
    </script>
    </head>
    <body>
    <ul id="tab-nav">
    <li class="facebook"><a href="javascript:Toggle('facebook');" onclick="applySelectedTo(this);return;"><img src="facebook-tab.gif" alt="facebook"></a></li>
    <li class="twitter"><a href="javascript:Toggle('twitter');" onclick="applySelectedTo(this);return;"><img src="twitter-tab.gif" alt="twitter"></a></li>
    <li class="picasa"><a href="javascript:Toggle('picasa');" onclick="applySelectedTo(this);return;"><img src="picasa-tab.gif" alt="Picasa"></a></li>
    <li class="bookmarking"><a href="javascript:Toggle('bookmarking');" onclick="applySelectedTo(this);return;"><img src="bookmarking-tab.gif" alt="Bookmarking"></a></li>
    <li class="youtube"><a href="javascript:Toggle('youtube');" onclick="applySelectedTo(this);return;"><img src="youtube-tab.gif" alt="youtube"></a></li>
    <li class="blogs"><a href="javascript:Toggle('blogs');" onclick="applySelectedTo(this);return;"><img src="blogs-tab.gif" alt="blogs"></a></li>
    </ul>
    
    <div id="facebook" style="display: none">Here is some facebook content Here is some facebook content Here is some facebook content Here is some facebook content Here is some facebook content</div>
    <div id="twitter" style="display: none"><p>Here is some twitter content</p></div>
    <div id="picasa" style="display: none"><p>Here is come picasa content</p></div>
    <div id="bookmarking" style="display: none"><p>Here is some bookmarking content</p></div>
    <div id="youtube" style="display: none"><p>Here is some youtube content</p></div>
    <div id="blogs" style="display: none"><p>Here is some blog content</p></div>
    
    
    
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    My apologies, it's case sensitive, and I typo'd. getElementById

  • Users who have thanked Sphynx for this post:

    marisa1981 (05-11-2009)


  •  

    Posting Permissions

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