Question

I have four different divs in my html that i want to keep hidden and then show the one of my choice depending on which link i click on. However, i cant hide them. It wont work, and i want whatever that is in respective div to be shown under the links, not next to them as they do now. My biggest difficaulty is to hide my divs, any solution?

Javascript

function show1(){
var minaP = document.getElementByID("one");
minaP.style.visibility = "visible";
}

function show2(){
var minaP = document.getElementById("two");
minaP.style.visibility = "visible";
}

function show3(){
var minaP = document.getElementById("three");
minaP.style.visibility = "visible";
}

function show4(){
var minaP = document.getElementById("four");
minaP.style.visibility = "visible";
}

function init() {

var minaDiv = document.getElementsByTagName("div");
for(i=0; i<minaDiv.length; i++){
  minaDiv[i].style.visibility = "hidden";
}

var minaA = document.getElementsByTagName("a");
for(i=0; i<minaA.length; i++){
  if(document.getElementById == "1"){
    minaA.onclick = show1;
  }
}

}

window.onload = init;

Html

<div>
<ul class="meny">
<li><a href="#" id="1">Utvärdering/Feedback</a></li>
<li><a href="#" id="2">Kontakt</a></li>
<li><a href="#" id="3">Öppettider</a></li>
<li><a href="#" id="4">Om Asperöd</a></li>
</ul>
</div>

<div id="one">
<p><b>Aperåd Äventyrsland</b></p> 
<p>Växel: 0200-123456999 (kl.08:30-15)</p>
<p>Stora Vägen 140</p>
<p>289 22 Aperöd</p>
<p>Skicka oss din <a href="#">fråga</a></p>
</div>
<div id="two">
<p>Du kan kontakta oss på följande nummer: 
<br> 040-123456
</p>
<p> Du kan även mejla oss:
<br> aperö[e-mail]
</p>
</div>
<div id="three">
<p>Vi har följande öppettider:</p>
<p> Mån-Fre: 10:00 - 20:00 </p>
<p> Lör: 10:00 - 18:00 </p>
</div>
<div id="four">

Aperöd är en fin park för alla möjliga personer. Vi erbjuder en massa, men det kostar 500kr

för att delta för en dag.

Answer 1

Maybe you should consider using/learning jQuery. It helps reducing code size and there are a lot of fancy animations 😉

Here a fast demo with .hide() .show()

http://jsfiddle.net/yFhX5/