Question

I cannot write Javascript but I have a snippet that I’m adding into a web page. Currently, my code has a mouseover that will reveal a hidden div. However, there is navigation in the hidden div that will immediately disappear as the user tries to click on a link, as the user needs to move their mouse away from the original trigger to reach the navigation.

Here is my Javascript:

<script language="JavaScript">
    function toggle(id) {
        var state = document.getElementById(id).style.display;
            if (state == 'block') {
                document.getElementById(id).style.display = 'none';
            } else {
                document.getElementById(id).style.display = 'block';
            }
        }
</script>

Here is my HTML:

<nav>
    <ul>
        <li class="ovr"><a href="#" onmouseover="toggle('hidden1');" onmouseout="toggle('hidden1');">Overview</a></li>
    </ul>
</nav>


<div class="container">
<div id="hidden1">
    <ul>
        <li><a href="#description">Description</a></li>
        <li><a href="#objectives">Objectives</a></li>
        <li><a href="#semestertopics">Semester Topics</a></li>
        <li><a href="#greenteaching">Green Teaching</a></li>
        <li><a href="#howtodowellinthiscourse">How to Do Well in this Course</a></li>
    </ul>
</div>

If my question has already been answered, a pointer in the right direction would be much appreciated – I don’t have all the right vocabulary to do the correct searches.

Thank you!

Answer 1

I ended up answering my own question. To keep the hidden div open when the user scrolled over it and to have it disappear again when they no longer needed it, I simply added ‘onmouseover’ and ‘onmouseout’ functions to the hidden divs.

<div id="hidden1" onmouseover="toggle('hidden1');" onmouseout="toggle('hidden1');>

Thank you for your time!