How to replace <div> with <td>?

This drop-down script works successfully when you select “Click to slide the panel down or up”, here’s the script code:

<script>

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>

<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

I have a navagation menu in a table. Here’s the current code in the table:

<table>
.....
<td><a href="../"><font>Contact</font></a></td>
....
</table>

I’m wondering how to change that code so that when the “Contact” text is chosen(in the table), the drop down panel appears (can go up and down when selected).

Any help will be appreciated.

Well, somebody’s going to say it, so it might as well be me.

That’s antiquated code you have there. You shouldn’t be using a table to layout your navigation, and the <font> tag has long been deprecated. (In your code snippet, it’s doing nothing anyway.)

2 Likes

Thanks for the reply so, if the navigation menu should be <ul> <li> etc, how can I add in the div code?

You don’t make it clear where the drop down panel is located as it is not in your second snippet of code?

If you are just trying to toggle an element on and off then you’d use the same ids that you have for your demo (#flip and #panel). Just add those ids to the trigger and the destination and your script should work assuming the ids are unique.

Thanks for your replies/help.

To answer your question “where the drop down panel is located”, it’s right below the navigation menu.

Currently I have this code, which now works successfully (when ‘contact’ is selcted the drop-down panels drops-down):

<ul>
<li><a href="../index.php">home</a></li>
<li><a href="../index.php">faq</a></li>
<li><a href="../index.php">register</a></li>
<li><a href="../log.php">login</a></li>
<li><div id="flip">contact</div></li>
</ul>

and this:

#flip
{
float: left;
font-family: arial, helvetica, sans-serif;
font-size: 25px;
color:#800000;
padding:14px 7px 0px 7px;
}

and this:

<style>
ul {
    margin: 0;
    padding: 0;
    background: #000000;
    max-width: 1000px;
    height: 50px;
    border: solid #ff6339;
    border-width: 1px 0px 1px 0px;
}

li {
    float: left;
    font-family: arial, helvetica, sans-serif;
	font-size: 25px;
    font-color:#800000;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

</style>

but, all nav menu selections change background color upon hover, and the mouse arrow turns into the pointed finger, prior to selecting, on all choices, except not on the ‘contact’ text (see attached image example). What can I change so that when you hover over ‘contact’ the background color changes and the mouse arrow appears over it?

Any help will be appreciated.

Thank you for posting the code. Now take that code and put it in a working page that demonstrates the issue so we can see what you see.

TIA

The reason that “Contact” is not behaving like the other navigation items is that they are <a> links, and contact is a <div>, so your link styling won’t be applied to it.

Thanks for your replies.
Is there a way to apply the ‘link syling’ to the <div>?

Well, you can add

#flip:hover {background-color: #555;
    color: white;
    cursor: pointer;
    }

which will match the font colour and cursor from your above code. (It looks nothing like your screenshot on my machine, so I’m guessing you didn’t post the full code.)

However, you should be aware that your navigation will fail for anybody using keyboard navigation (which includes users of screen readers), who will be unable to access that tab.

(Also, you have li {font-color:#800000;}, which is invalid. The property is just color.)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.