www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to make this toggle all easier?

Hybrid View

  1. #1
    Join Date
    Jul 2009
    Posts
    1

    How to make this toggle all easier?

    I have a script below that show/hides content based on getElementbyID. Works great. But how do I create a "show/hide all" link without having to call it multiple times at once? I'm fairly novice when it comes to writing JavaScript so any help would be appreciated.

    Script Now:

    function toggleDiv( elemID )
    {
    var elem = document.getElementById( elemID );
    if ( elem.style.position != 'absolute' )
    {
    elem.style.position = 'absolute';
    elem.style.left = '-4000px';

    }
    else
    {
    elem.style.position = 'relative';
    elem.style.left = '10px';

    }
    }

    My Current Toggle All Link:

    <a href="javascript:toggleDiv('service_twitter');toggleDiv('service_facebook');toggleDiv('service_netvi bes');toggleDiv('service_rss');toggleDiv('service_youtube');toggleDiv('service_flickr');toggleDiv('s ervice_pageflakes');toggleDiv('service_podcasts');">Show/Hide all</a>

  2. #2
    Join Date
    May 2009
    Posts
    2
    Use this to call your function:

    <a href="javascript:toggleDiv('service_twitter','service_facebook','service_netvi bes','service_rss')">Show/Hide all</a>

    Now in the function below, all of the id's you passed through go into an object called arguments. Then you can just loop through each argument, setting it's display style to 'none'

    Code:
    function toggleDiv()
    {
    	for (var x = 0; x < arguments.length; x++){
    		var elem = document.getElementById(arguments[x]);
    		if ( elem.style.display != 'none' )
    		{
    			elem.style.display = 'none';
    		}
    		else
    		{
    			elem.style.display = 'block';
    		}
    	}
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles