单击表格单元格内的链接时显示div

Question

Probably very simple thing, but I can't figure it out. I want to toggle the visibility of a div, when clicking on a link.

So this is my situation

<table width="100%">
   <tr>
      <td>
         <a onclick='showDiv' />
      </td>
   </tr>
</table>
<div name='divToShow' style='display:none;' />

The code I had so far:

// Then show the panel with substitute information
var control = $(parent).parent().parent().parent().find('div[name$="divToShow"]');
control.toggle();

So I'm not sure how to achieve this. Anyone?

Thanks, Daniel

Answer 1

Why not assigning an ID to the div and then show it using $('#id').toggle()?

Basic example: http://jsfiddle.net/fVXAC/

Answer 2

You may use jQuery's toggle() function.

something like;

$('#clickme').toggle(
function() {
    $('#mydiv').css({ 'display':'block' });
}, function() {
    $('#mydiv').css({ 'display':'none' });
});

Here is the working demo: http://jsfiddle.net/CXHAW/

Answer 3

Try this

http://jsfiddle.net/Eez4g/1/

I think that's what you are trying to do

Answer 4

Elements like <a> and <div> needs to be closed with </a> and </div> , and are not self closing.

An <a> element should also have a href attribute, even if it's just href="#" .

$("a[onclick='showDiv']")​​​.on('click', function(e) { //find element based on onclick, would be better with an ID
    e.preventDefault(); //all <a> elements should have a href
    $(this).closest('table').next($("[name='divToShow']")).toggle();
})​​​​;​

FIDDLE

If you start by understanding HTML and writing the correct markup, using javascript will become a lot easier for you.