You have a number of errors in your code; I'll try to go through them one-by-one to clarify those problems and offer solutions that should, hopefully, lead to better understanding (and practice) in future.
First, an id "...assigns a name to an element. This name must be unique in a document."1. Note the 'must,' which means that a document with a duplicated id (more than one element sharing the same id value makes the document invalid, and causes problems with JavaScript, since it will only ever look for one element with a given id, and recover from invalid documents with unpredictable results).
That being the case I've amended the ids of the div elements by, effectively, adding the Content string, and amended the ids of the li elements to be single word and lower-case so that they can be predictably made to reference 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 doesn't work as you'd intend, because the other problems still exist; it's merely to show the corrected/amended HTML).
Now, the JavaScript.
The reason it can't work, as noted by @Jeffman in his answer is because element.style references only the in-line styles of an element (those set with the style attribute), not the styles set with either a stylesheet or in the head of the document. This means you're comparing an undefined variable with a string, which will always be false.
You're also using two functions to do the same thing, which is wasteful and unnecessary. This is the second reason I've modified the ids of the various elements. A modified (single) function to do 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 requires the following HTML for the a elements:
<a href="#" onclick="sel(event, this)">About Me</a>
JS Fiddle demo.
Now, this still requires obtrusive JavaScript (using in-line event-handling within the HTML itself, which requires updates every time you may want to add further event-handling or change the function to call upon those events). Therefore I'd suggest moving to a more unobtrusive version, such as:
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, while this works, this still requires assigning event-handlers to multiple elements (despite being more easily done using a loop within JavaScript itself).
The easier way is to delegate the event-handling to the parent element, and assess, in the function itself, where the event originated. Which would 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:
- http://www.w3.org/TR/html401/struct/global.html#h-7.5.2.
References:
