Getting div to show on load

[pa007]

All of the different sub-forums and guidelines confused me a bit. So I hope I'm ok posting here. I have a bit of JS which sets divs with a certain class to display:none; and then when one is clicked it set that one (the div that link is linked to) to display: block; but all the others to display: none; So essentialy it swaps them.

My problem is that I would like the very first dive to actually be displayed when the page is loaded and I wondered how I would achieve this. As it is all of my divs are hidden when the page loads.

Below is the relevant HTML:

<div id="primary_services">
        <h1>Services<h1>
        <div class="section" id="intro">
          <h2>Introduction</h2>
          <p>Summarizing my experience of my week in Austin, TX for South by 
          Southwest is a difficult task. This was my first time attending, 
          and it’s been physically, emotionally, and mentally 
          exhausting/invigorating.</p>
          <p>I’d rather not go through point by point my thoughts on every 
          single experience, but I will point out some general thoughts.</p> 
        </div>
        
        <div class="section" id="web">
          <h2>Web</h2>
          <p>Summarizing my experience of my week in Austin, TX for South by 
          Southwest is a difficult task. This was my first time attending, 
          and it’s been physically, emotionally, and mentally 
          exhausting/invigorating.</p>
          <p>I’d rather not go through point by point my thoughts on every 
          single experience, but I will point out some general thoughts.</p> 
        </div>
        
        <div class="section" id="print">
          <h2>Print</h2>
          <p>Summarizing my experience of my week in Austin, TX for South by 
          Southwest is a difficult task. This was my first time attending, 
          and it’s been physically, emotionally, and mentally 
          exhausting/invigorating.</p>
          <p>I’d rather not go through point by point my thoughts on every 
          single experience, but I will point out some general thoughts.</p> 
        </div>
        
        <div class="section" id="identity">
          <h2>Identity</h2>
          <p>Summarizing my experience of my week in Austin, TX for South by 
          Southwest is a difficult task. This was my first time attending, 
          and it’s been physically, emotionally, and mentally 
          exhausting/invigorating.</p>
          <p>I’d rather not go through point by point my thoughts on every 
          single experience, but I will point out some general thoughts.</p> 
        </div>
      </div>

And the JS so far:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

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 prepareInternalnav() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("services")) return false;
  var nav = document.getElementById("services");
  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(prepareInternalnav);

As you can see my mark-up is free of any JS so I'm not looking for solutions that involve inline JS. There is probably a pretty simple solution but it eludes me. Would it work if I added a new class to the first div and then basically said if a dive has this new class then it should display: block; ? would something this simple work?

Hope you can help.

Pete.

[Basscyst]

addLoadEvent(function(){showSection('intro')});

That work for ya?

[pa007]

That's brilliant mate. I see now it was all set up for it as well. Stupid me.

Another question, how do I change the actual link when it is clicked. All I want to do is set the clicked anchor to background: transparent; and then make sure all the other have a bg color applied and when a different on is selected the same will happen (the selected is background:transparent and the others have one set). Do I need to go through all of this again or is there a simpler way?

Again, thankyou so much,

Pete.

[Basscyst]

You'll have to do the same thing for the links as you did for the divs, loop through them and set the background, as you did to set the display of the divs.

Then just add the new function into the onclick event for the links. Or you can just loop through the links in the same function that you are looping through the divs in which case you would not need to update the onclick event.

Make sense?