How to build collapsible/expandable table rows like news.google.com

manhsakura

New Member
I am building a webpage to show some articles and related article. I want to build something similar to what you see on news.google.comI strongly feel there is a better way to do it than what I am doing, so coming here for suggestions.Currently my html code is something like this:\[code\]<table> <tr> <td><a href="http://stackoverflow.com/questions/15580221/article.htm">{{ArticleHeading}}</a> <br/> {{ArticleSynopsis}}</td> <td>{{ArticleSource}}</td> <td>{{ArticleDate}}</td> </tr></table>\[/code\]I also have color change of row when mouse hovers.\[code\].table-hover { background-color:#FFE292; border:1px solid #DD9946; color:#000000;}\[/code\]What I want and cannot figure out how to do it:1. When user clicks on a row anywhere (not just headline), the table should expand to show another sub-table with related articles.2. If possible hovering effect is stopped once table is expanded.I have already seen accordion example from http://twitter.github.com/bootstrap/javascript.htmlThat doesn't meet my requirements.Please let me know if something is not clear or scope of this question is very broad. I would love to address those concern of yours.
 
Back
Top