Question

I cannot write Javascript code yet, and I’m trying to edit some code that toggles divs to be invisible/visible. Currently, it will reveal the div when the user clicks on the link – however, I’d like the hidden div to become visible on a mouseover instead.

Here is the Javascript code:

<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 the HTML it is linked to:

<nav>   <ul>
        <li class="ovr"><a href="#" onclick="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>

Thank you very much for helping! If I’ve posted a question that’s already been answered, I’d be very grateful if someone could point me in the right direction – I don’t have all the vocabulary to properly search for an answer.

Answer 1

Use the onmouseover event to activate the “show” toggle.

http://www.w3schools.com/jsref/event_onmouseover.asp

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