DrWooolie
DrWooolie

Reputation: 8055

show and hide div

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ö[email protected]
</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.

Upvotes: 0

Views: 345

Answers (2)

FastRipeFastRotten
FastRipeFastRotten

Reputation: 1275

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/

Upvotes: 1

blankabout
blankabout

Reputation: 2627

You need to use style.display = 'none', not style.visibility and style.display = 'block' or 'inline' to show them

Upvotes: 1

Related Questions