Question

I am writing a php page where when the mouse hovers over a link, more links and some info should drop down. Thing is, I have no idea how to do this.

I’ve put in some javascript, and I can get the id of the div that I want to drop down. Setting the visibility, however, doesn’t work as that just makes that block appear or disappear. Do I need to add and remove blocks? I would prefer if the solution does not need to reload the page, and css is, at best, a last resort.

<script type="text/javascript">
function showElement(id){
    document.getElementById(id).style.visibility = "visible";
}
function hideElement(id){
document.getElementById(id).style.visibility = "hidden";
}
</script>

For those of you that suggested I use jquery, here is my attempt, based on what you gave me and some googling:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
        $('a#').each( function(){
            var $id = $(this).attr('id');
            $('a#'+$id).hover(function(){
                $('div#'+$id).toggle();
            });
        });
    });
    </script>

It doesn’t work. Admittedly, that’s not surprising, seeing as I never looked at jquery before yesterday. Still, I have no idea what is wrong with it (probably quite a few things). What it is trying to do is iterate through all the links, then when hovered over, the div with the same name should display. Or that’s the theory.

Answer 1

Please consider using a javascript library like jquery to manipulate dom elements. Below is a very basic example of hover function.

http://jsfiddle.net/LC7Fy/1/

Check out jquery documentation for other usage examples.