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

  1. you can't wrap tr tags div.
  2. 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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -