• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Div activate on menu click

CodeNoob

New Coder
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

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>

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


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>

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.


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();
        });
    });

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!
 

Attachments

  • Project.zip
    2.5 KB · Views: 2

Top