You have a number of errors in your code; I will try to go through them one by one in order to clarify these problems and propose solutions that I hope will lead to a better understanding (and practice) in the future.
First, id "... assigns a name to the element. This name must be unique in the document." 1 . Pay attention to "must", which means that a document with a duplicate id (more than one element sharing the same id value, invalidates the document and causes problems with JavaScript, because it will only search for one element with the given id and restore from invalid documents with unpredictable results).
In this case, I changed the id of the div elements, finally adding the Content line and making the id changes of the li elements in one word and lower so that they can be predictable to refer to each other. This gives the following HTML:
<nav id="nav"> <ul class="main_nav"> <li id="about"><a href="#" onclick="About_Me_Sel()">About Me</a></li> <li id="home"><a href="#" onclick="Home_Sel()">Home</a></li> </ul> </nav> <div id="aboutContent"> <p>Hello</p> </div> <div id="homeContent"> <p>hi</p> </div>
JS Fiddle (this still does not work as you expected, because other problems still exist, but just show the corrected / changed HTML).
Now javascript.
The reason it cannot work, as @Jeffman noted in his answer , is because element.style refers only to the element's inline styles (those set with the style attribute), and not the styles specified either in the stylesheet or in the title of the document. This means that you are comparing an undefined variable with a string that will always be false .
You also use two functions to do the same, which is wasteful and unnecessary. This is the second reason I changed the id various elements. A modified (single) function to accomplish what you want to do:
function sel(e, self) { // e is the click event, // self is the 'this' DOM node var id = self.parentNode.id, toggle = document.getElementById(id + 'Content'), display = toggle.style.display; toggle.style.display = display == 'block' ? 'none' : 'block'; }
The above HTML code for a contains the following HTML code:
<a href="#" onclick="sel(event, this)">About Me</a>
JS Fiddle demo .
Now it still requires obsessive JavaScript (using the built-in event handling in the HTML itself, which requires updates every time you want to add additional event processing or change the function to call these events). Therefore, I suggest switching to a more unobtrusive version, for example:
function sel(e, self) { // e is the click event, // self is the 'this' DOM node var id = self.parentNode.id, toggle = document.getElementById(id + 'Content'), display = toggle.style.display; toggle.style.display = display == 'block' ? 'none' : 'block'; } var links = document.getElementById('nav').getElementsByTagName('a'); for (var i = 0, len = links.length; i < len; i++) { links[i].onclick = function (e){ sel(e, this); }; }
JS Fiddle demo .
Now that this works, it still requires assigning event handlers to multiple elements (even though they are easier to execute using a loop inside JavaScript itself).
An easier way is to delegate the event processing to the parent element and evaluate in the function itself where the event occurred. Which will give the following JavaScript:
function sel(e) { // e is the click event, // self is the 'this' DOM node var self = e.target, id = self.parentNode.id, toggle = document.getElementById(id + 'Content'), display = toggle.style.display; toggle.style.display = display == 'block' ? 'none' : 'block'; } var nav = document.getElementById('nav'); nav.addEventListener('click', sel);
JS Fiddle demo .
Notes:
Literature: