javascript - JS/HTML - .SlideToggle two tables next to each other -
i have 2 tables different heights next each other. tables slidetoggle independently.
when selecting table headers, nothing happening...
the fiddle: http://jsfiddle.net/wod51fvl/
any comments welcomed!!
thanks
the html:
<h1>test heading 1</h1> <table> <tr> <td valign="top"> <table class="tablesort"> <thead> <tr> <th id="clientclick" colspan="3" style="cursor:pointer;">client</th> </tr> </thead> <div id="clientresult"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </div> </table> </td> <td valign="top"> <table class="tablesort"> <thead> <tr> <th id="employeeclick" colspan="3" style="cursor:pointer;">employee</th> </tr> </thead> <div id="employeeresult"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </div> </table> </td> </tr> </table>
the js:
var j$ = jquery.noconflict(); j$(document).ready(function () { j$("#clientclick").click(function () { j$("#clientresult").slidetoggle(600); }); }); j$(document).ready(function () { j$("#employeeclick").click(function () { j$("#employeeresult").slidetoggle(600); }); });
a bad html , js
- you can't wrap tr tags div.
- you don't need call document.ready function twice
here quick jsfiddle fit example. needs improved(no time sorry).
http://jsfiddle.net/wod51fvl/7/
$(document).ready(function () { $("#clientclick").click(function () { $("#clientresult").slidetoggle(600); }); $("#employeeclick").click(function () { $("#employeeresult").slidetoggle(600); }); });
Comments
Post a Comment