Have div appear to the right of a TD onclick of TD with jquery/javascript? -

so have absolute positioned div of 5x5 pixel square.

if have table

<table><tr><td>something</td></tr></table> 

i want div show right of td when click anywhere inside of td, should appear snapped right side of td regardless of click in td. there simple way accomplish in jquery/javascript?

i'd suggest using hidden table cells, , showing div within that:

<table>     <tr>         <td>something</td>         <td class="hidden"><div></div></td>     </tr>     <tr>         <td>something</td>         <td class="hidden"><div></div></td>     </tr> </table> 

jquery:

$('tr td').click(     function(){         $(this).closest('tr').find('.hidden').toggle();     }); 

css:

td {     vertical-align: middle;     width: 5em;     height: 2em; }  .hidden {     display: none; }  .hidden div {     display: block;     height: 5px;     width: 5px;     background-color: #f90; } 

js fiddle.

---

edited revise content little, containing (.hidden) td visible (to reduce chance of page jumping around due appearing table cells):

jquery:

$('tr td').click(  function() {     $(this).closest('tr').find('.hidden div').toggle(); }); 

css:

table {     empty-cells: show; }  td {     vertical-align: middle;     width: 5em;     height: 2em; }  td:hover {     background-color: rgba(255,255,0,0.2); }  .hidden div {     display: none; }  .hidden div {     height: 5px;     width: 5px;     background-color: #f90; } 

js fiddle.

---

edited per @nicky waite's suggestion (below):

maybe stick hover on tr element.

$('tr').click(  function() {     $(this).find('.hidden div').toggle(); }); 

js fiddle demo.