shav shav - 6 months ago 18
Javascript Question

need advice on how to get this to work

I need to get the content to be visible when the link on the side bar is clicked as its too long. I have the following links and have sections separated with div tags. and a JavaScript function that I call from the anchor tags, but its not working it doesn't change the content. Can you please tell me how to do this. Much appreciated

Anchor Tags



<a href="" id="mySelect" onclick="return myFunction();" value="about">
<h4>Who we Are</h4>
</a>
<a href="" id="mySelect" onclick="return myFunction();" value="mission">
<h4>Our Mission & Vission</h4>
</a>
<a href="" id="mySelect" onclick="return myFunction();" value="director">
<h4>Director & Advisory Board</h4>
</a>


Section Tags



<div id="about" style="display: block;">default content</div>
<div id="mission" style="display: none;">content</div>
<div id="director" style="display: none;">content</div>


JavaScript



<script>
function myFunction() {
var x = document.getElementById("mySelect");
if (x=="") {
document.getElementById("about").style.display="block";
document.getElementById("mission").style.display="none";
document.getElementById("director").style.display="none";
}
if (x=="about") {
document.getElementById("about").style.display="block";
document.getElementById("mission").style.display="none";
document.getElementById("director").style.display="none";
}
if (x=="mission") {
document.getElementById("about").style.display="none";
document.getElementById("mission").style.display="block";
document.getElementById("director").style.display="none";
}
if (x=="director") {
document.getElementById("about").style.display="none";
document.getElementById("mission").style.display="none";
document.getElementById("director").style.display="block";
}
}
</script>

Answer

Here's a working JSFiddle and the code below.

HTML

<div id="about" style="display: block;">default content</div>
<div id="mission" style="display: none;">content</div>
<div id="director" style="display: none;">content</div>
<a class="mySelect" onclick="myFunction(this)" id="about">
  <h4>Who we Are</h4>
</a>
<a class="mySelect" onclick="myFunction(this)" id="mission">
  <h4>Our Mission & Vission</h4>
</a>
<a class="mySelect" onclick="myFunction(this)" id="director">
  <h4>Director & Advisory Board</h4>
</a>

JS

function myFunction(vm) {
  var x = document.getElementsByClassName("mySelect");
  var id = vm.id;
  if (id == "") {
    document.getElementById("about").style.display = "block";
    document.getElementById("mission").style.display = "none";
    document.getElementById("director").style.display = "none";
  }
  if (id == "about") {
    document.getElementById("about").style.display = "block";
    document.getElementById("mission").style.display = "none";
    document.getElementById("director").style.display = "none";
  }
  if (id == "mission") {
    document.getElementById("about").style.display = "none";
    document.getElementById("mission").style.display = "block";
    document.getElementById("director").style.display = "none";
  }
  if (id == "director") {
    document.getElementById("about").style.display = "none";
    document.getElementById("mission").style.display = "none";
    document.getElementById("director").style.display = "block";
  }
}
Comments