[Solved] Webpage not working – HTML5 [closed]

If my understanding is correct, your problem is that on the actual website page, all the links are being displayed on page load instead of like in the sample page where they are hidden and displayed only based on selection.

If this is the case assign the style: display: none; to all the individual div tags. This will hide the links on page load. You can do this like below:

<div id="Option" style="display: none;"> <a href="#">Sample</a> </div>

If you don’t want to use inline styles, create a CSS class (say hidden) in the following way and assign it to all the Divs that need to be hidden.

.hidden{ 
    display: none;
}

The JS currently seems to be hiding all DIVs whose ID does not equal the selected item’s value. This was making your mainContent1 also get hidden. Try the code present in this fiddle. It is a mini version of your code.

I have added a CSS class hidden to the divisions and in the showTab function of the JS instead of

$('div').not(name).hide();

use the following line (this will select only DIVs within mainContent1 for hiding).

$('#mainContent1 > div').not(name).hide();