tags:

views:

29

answers:

0

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"&gt;&lt;/script&gt;
<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>