Reputation: 8055
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
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()
Upvotes: 1
Reputation: 2627
You need to use style.display = 'none'
, not style.visibility
and style.display = 'block'
or 'inline'
to show them
Upvotes: 1