SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Show/Hide

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide

    Hi,

    I have a page that I am wanting to show/hide sections.

    http://www.lyonparkjuniors.org.uk/index.asp

    As you can see there are two buttons, Latest News and Hot Dates, I have used a script from DOM Scripting book, and it works to an extent, my main issue though is I want the Latest News section to be displayed on page load.

    I am struggling, here is my js code.

    Code:
    // toggle visibility
    function showSection(id) {
    	var divs = document.getElementsByTagName("div");
    	for (var i=0; i<divs.length; i++ ) {
    		if (divs[i].className.indexOf("section") == -1) continue;
    		if (divs[i].getAttribute("id") != id) {
    			divs[i].style.display = "none";
    		} else {
    			divs[i].style.display = "block";
    		}
    	}
    }
    
    function prepareSwitch() {
    	if (!document.getElementsByTagName) return false;
    	if (!document.getElementById) return false;
    	if (!document.getElementById("switch")) return false;
    	var nav = document.getElementById("switch");
    	var links = nav.getElementsByTagName("a");
    	for (var i=0; i<links.length; i++) {
    		var sectionId = links[i].getAttribute("href").split("#")[1];
    		if (!document.getElementById(sectionId)) continue;
    		document.getElementById(sectionId).style.display = "none";
    		links[i].destination = sectionId;
    		links[i].onclick = function() {
    			showSection(this.destination);
    			return false;
    		}
    	}
    }
    
    addLoadEvent(prepareSwitch);
    If anyone can help me, you will get loads of good will thoughts from me.

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At first glance, it looks as though adding this to the body tag would work:
    <body onload="showSection('newsArea');">

    However it may be simpler to set newsArea to display:block as default.
    From the English nation to a US location.

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, well i'm trying to have an unobtrusive approach and keep all my javascript external and not inline.

    I also tried to set the newsArea to display:block in the css, but it didn't want to work.

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, by adding the onload code to the body tag it does show the section as default, but it is inline scripting which I want to avoid and secondly when I click the Hot Dates button it does nothing.

    Any ideas?

  5. #5
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?

  6. #6
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to remove the onload from the code, just move it to the javascript file:
    Code:
    addLoadEvent(function () {
      showSection('newsArea');
    });


Bookmarks

Posting Permissions

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