JavaScript Div activate on menu click

[CodeNoob]

Hi everyone, i'm stuck at a coding project and new to this forum and thought i'd give it a try.

I have a left sidebar with menu options and submenu options. Depending on the submenu option chosen I want the main content area div to be hidden and the appropriate one to be shown. I am a complete coding rookie but i found interesting stuff online and tried the following :

// Submenu items with data element

[CODE title="submenu"]div id="myDropdown" class="dropdown-content">
<a id="algemeen" class="menuHover" data-item="algemeen">Algemeen</a>
<a id="procedures" class="menuHover" data-item="procedures">Procedures</a>
<a id="tips-and-tricks" class="menuHover" data-item="tips-and-tricks">Tips & tricks</a>
</div>[/CODE]

// Div that are currently Hidden and i want to be shown based on data item


[CODE title="div for content area"]<div id="algemeen" style="display:none" class="content">
<p>algemeen</p>
</div>

<div id="procedures" style="display:none" class="content">
<p>procedures</p>
</div>

<div id="tips-and-tricks" style="display:none" class="content">
<p>tips-and-tricks</p>
</div>
<script>[/CODE]

And the Jquery code that i'm trying to load. I put an alert in there which shows me that the menu click action is being recorded. But there must be a mistake in the function somewhere, i've looked over this for a few hours now and i'm stuck. I know nothing about JQuery so i can't troubleshoot this at all on my own.


[CODE title="Jquery code"]$(document).ready(function () {
$('.menuHover').click(function () {
alert("Hello! I am an alert box!!");
var $clicked = $(this)
$('.menuHover').each(function(){
var $menuHover = $(this);
if (!$menuHover.is($clicked))
{
$($menuHover.attr('data-item')).hide();
}
});
$($clicked.attr('data-item')).toggle();
});
});[/CODE]

And additional extra questions which is the next step if i get this working. How do i show the "active/shown" div at the top.
I have 1 active "homepage div" and the others are now hidden underneath. So basically when a subitem menu is clicked I want to hide the homepage div and show the appropriate submenu div instead of the homepage div.


I'll attach my complete html and css files to this post as well and i'm hoping for a fast response.
Either way thank you in advance!