Hello Folks, I am new to JQuery and have a similar requirement as David. I have a sample code as given below. It works fine, except I need to display it as a table with tr and td tags and the animation should be like toggleup. So basically, when I mouse over the tr elements, the corresponding td elements should pop up for the particular tr.
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>Test</TITLE>
<STYLE>
body, input{
font-family: Calibri, Arial;
}
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion li{
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
</STYLE>
</HEAD>
<BODY>
<ul id="accordion">
<li>What's New</li>
<ul>
<li><a href="#">Reman</a></li>
<li><a href="#">Core</a></li>
</ul>
<li>Featured Links</li>
<ul>
<li><a href="#">Program</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Info</a></li>
</ul>
<li>Tuned</li>
<ul>
<li><a href="#">Tuned?</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Subscribe</a></li>
</ul>
<li>Ordering</li>
<ul>
<li><a href="">coming soon</a></li>
</ul>
</ul>
</BODY>
<SCRIPT>
$("#accordion > li").mouseover(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(300);
$('#accordion > li').slideDown(100);
}
$(this).next().slideToggle(300);
});
//$('#accordion > ul:eq(0)').show();
</SCRIPT>
</HTML>