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 to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Toggle content script: content shown when JavaScript is off

    I use a small piece of JS code to make different elements on the page show/hide when clicking a link, based on id:
    Code:
    function toggle( targetId ){
      if (document.getElementById){
      		target = document.getElementById( targetId );
      			if (target.style.display == "none"){
      				target.style.display = "";
      			} else {
      				target.style.display = "none";
      			}
      	}
    }
    Then HTML looks like this:
    Code:
    <a href="#" onClick="toggle('news'); return false;">Show/hide news</a>
    <div id="news" style="display:none">BlahBlahBlah</div>
    This works. Initially the element is hidden (with style="display:none" property of the element), and the script gets its id and changes its display property to "block" when clicking on a link.
    But when Javascript in a browser is turned off, the elements to show are all hidden, and there's no way to see the content of the element.
    My question: is there a way to hide toggled elements on page load with JS, so that when it's turned off the hidden content is shown?
    Any help would be appreciated)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just javascript to set their initial display.
    Code:
    window.onload = function()
    {
    document.getElementById('news').style.display='none';
    }
    That is okay if you only have a few divs you need to hide but if you a lot of them then using a class on them would be better because then you could do something like this
    Code:
    window.onload = function()
    {
    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++)
    {
    if(divs[i].className == 'hideme')
    divs[i].style.display = 'none';
    }
    }
    Then the div would look like
    Code:
    <div class="hideme"></div>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    As pointed out, any content which starts out hidden and which can only be made visible via js, should be hidden using js too.
    Additionally, any element which is there solely to support a js function (such as your toggler) should be added via js.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en-GB">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>test</title>
    	<style type="text/css">
    
    		body.hasJS .hide {
    			display: none;
    		}
    
    	</style>
    	<script type="text/javascript">
    
    		window.onload = function() {
    
    			hasJS();
    			createToggle();
    
    		}
    
    		function hasJS() {
    
    			var bodyEl = document.getElementsByTagName('body')[0];
    			bodyEl.className += (bodyEl.className) ? ' hasJS' : 'hasJS' ;
    
    		}
    
    		function createToggle() {
    
    			if (!document.getElementById('toggleHolder')) return;
    
    			var tHolder = document.getElementById('toggleHolder');
    			var toggle = document.createElement('a');
    			toggle.href = '#';
    			toggle.onclick = function() { toggleFunc('news'); return false; }
    			toggle.appendChild(document.createTextNode('Show/Hide news'));
    
    			tHolder.appendChild(toggle);
    
    
    		}
    
    		function toggleFunc(targetId) {
    
    			if (!document.getElementById) return;
    
    			var trgt = document.getElementById(targetId);
    			trgt.className = (trgt.className == 'hide') ? '' : 'hide';
    		}
    
    	</script>
    </head>
    <body>
    
    <div id="toggleHolder"></div>
    
    <div id="news" class="hide">Blah Blah Blah</div>
    
    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your fast reply.
    The last script matches perfectly in the case when there's only one element on the page to be hidden, but i unfortunately have many of them on one page, and the text of the link is different in each case ("Show the news", "+", "Search")... Then, there are cases like this:
    Code:
    <div id="search"><a href="search.html" onclick="toggle('search_form'); return false;">Поиск</a></div>
    When JS is on, clicking on the link makes a search form appear; when JS is off, it loads a standalone search page. Thus it is needed also in JS-is-off state.

    And the _Aerospace_Eng_'s script only problem is that there are not only 'div' elements which should be hidden but also 'ol', for example. When 'div' is replaced with '*' in "document.getElementsByTagName(...)" expression, it works perfectly but only if there was no class assigned before to the element.
    Is it possible to hide the elements without changing the HTML code (adding classes etc.), only on the base of the link with onClick assigned?
    Thanks in advance

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Code:
    function toggleFunc(targetId) {
    
    	if (!document.getElementsByTagName) return;
    
    	var els = document.getElementsByTagName('*');
    	for (var i = 0, tEl; tEl = els[i]; i++) {
    		if (tEl.className && tEl.className.indexOf('special') != -1) {
    			tEl.className = (tEl.className.indexOf(' hide') != -1) ? tEl.className.replace(' hide','') : tEl.className+' hide';
    		}
    	}
    }
    Code:
    <div id="toggleHolder"></div>
    
    <div>1: Blah blah blah.</div>
    
    <div class="special hide">2: Blah blah blah.</div>
    
    <ol class="special hide">
    	<li>3: Blah blah blah</li>
    	<li>3.1: Blah blah blah</li>
    </ol>
    
    <p>4: Blah blah blah.</p>
    The items you wish to address should have the class value of special*. The presence (or absence) of a secondary value of hide dictates whether that element is displayed or hidden.

    (* You can change special to anything you like, but try to use class with semantics in mind. Be sure to reflect any class name changes in both the markup, CSS and the js.)

    The above example is a little rough and ready, but it should be sufficient to demonstrate the principles of how you can address and alter multiple elements in one go.
    Last edited by Bill Posters; 07-21-2007 at 03:20 PM.

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the useful script


  •  

    Posting Permissions

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