Show And Hide Div When Clicking On A Link

December 27, 2023 Post a Comment

When i click on a link, i want a div to become visible. However, i need to do this by knowing which link is clicked on, by checking which id it has. The content is hidden, but will

Solution 1:

functionshow(a) {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
    if (divs[i].className == "div") {
        divs[i].style.visibility = 'hidden';
    }
}
if (a.id == "link1") {
    document.getElementById("content1").style.visibility = 'visible';
}
elseif (a.id == "link2") {
    document.getElementById("content2").style.visibility = 'visible';
}
elseif (a.id == "link3") {
    document.getElementById("content3").style.visibility = 'visible';
}
elseif (a.id == "link4") {
    document.getElementById("content4").style.visibility = 'visible';
}

}

functioninit() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
    if (divs[i].className == "div") {
        divs[i].style.visibility = 'hidden';
    }
}
var a = document.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
    a[i].setAttribute("onclick", "show(this);");
}

}

Solution 2:

Create a links object which provides the mappings. Grab the target element from the event and store its id. Then use the id to grab the proper element's id from the links object.

functionshow(event){
var links = {
    link1: "content1",
    link2: "content2",
    link3: "content3",
    link4: "content4"
};

for(var x = 0; x < links.length; x++){
   document.getElementById(links[id]).style.visibility = "hidden";
}

var id = event.target.id;
var a = document.getElementsByTagName("a");
document.getElementById(links[id]).style.visibility = 'visible';
}

There is also an issue with the init function. Since a is an array of elements you must iterate this array and bind the show function to the onclick event.

functioninit() {

    var divs = document.getElementsByTagName("div");
    for (i = 0; i < divs.length; i++) {
        if (divs[i].className == "div") {
            divs[i].style.visibility = 'hidden';
        }
    }
    var a = document.getElementsByTagName("a");
    for(var x = 0; x < a.length; x++){
       a[x].onclick = show;
    }
}

Working Example: http://jsfiddle.net/538s2/

Solution 3:

use div.style.display = 'block'; div.style.display = 'none';

Solution 4:

You need to do it in a different way. I've made some changes. you can copy and try this one

<head><title>Inl1-1</title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><linkrel="stylesheet"type="text/css"href="style-1.css"><scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script><scripttype="text/javascript"src="Uppg1.js"></script><scripttype="text/javascript">functionshow(id){


if(id == 'link1'){
document.getElementById("content1").style.visibility = 'visible';
}
elseif(id == 'link2'){
document.getElementById("content2").style.visibility = 'visible';
}
elseif(id == 'link3'){
document.getElementById("content3").style.visibility = 'visible';
}
elseif(id == 'link4'){
document.getElementById("content4").style.visibility = 'visible';
}
}

functioninit(){

var divs = document.getElementsByTagName("div");
for(i=0; i<divs.length; i++){
  if(divs[i].className == "div"){
    divs[i].style.visibility = 'hidden';
  }
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}

window.onload = init;
</script></head><body><ulclass="meny"id="menu"><li><ahref="javascript:show('link1')"id="link1" >Utvärdering/Feedback</a></li><li><ahref="javascript:show('link2')"id="link2">Kontakt</a></li><li><ahref="javascript:show('link3')"id="link3">Öppettider</a></li><li><ahref="javascript:show('link4')"id="link4">Om Asperöd</a></li></ul><divclass="div"id="content1"><p>Du kan kontakta oss på följande nummer: 
<br> 040-123456
</p><p> Du kan även mejla oss:
<br> aperöd@hotmail.com
</p></div><divclass="div"id="content2"><p><b>Asperå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 <ahref="Inl1-3.html">fråga</a></p></div><divclass="div"id="content3"><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><divclass="div"id="content4"><p>Asperöd är en fin park för alla möjliga personer. Vi erbjuder en massa, 
<br> men det kostar 500kr för att delta för en dag.
</p><p> Asperöd är fylld med turister som besöker platsen minst en gång per månad. </p><p> Asperöd är bland de största nöjesparkerna i Scandinavien. </p></div></body>

javascript dox

Show And Hide Div When Clicking On A Link

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Show And Hide Div When Clicking On A Link"