Jquery toggle and show

In the below code,On click Details link the div should show up in an iframe with scroll bar and click on the link again the iframe and the div should not ne show.How to do this

 <script>
  function toggle(div)
  {

  }
 </script>


<a href="#" onclick=toggle("div0");>Details </a><Name: Sal
<div id="div0" style="display:none">
开发者_开发问答<table>
<tr><th>Date</th><th>Link</th></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
</table>
</div>
<a href="#" onclick=toggle("div1");>Details </a><Name: Tom
<div id="div1" >
<table>
<tr><th>Date</th><th>Link</th></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
<tr><td>2010-04-20 10:26:01</td><td></td></tr>
</table>
</div>

Use the toggle() function of jQuery:

function toggle(element){     
  $('#' + element).toggle();     
});

What do you need the iframe for? You can set the iframe around the div, and use the toggle on the iframe element.

Agree with Justus, You usually don't need the iFrame, and the toggle function does the work elegantly. If you still like to use the iFrame, you can set its contents this way:

$('#myframe').contents()[0].body.innerHTML = $('#mydiv').html();

To an HTML that looks like this:

<iframe name="framename" id="myframe"></iframe>
<div id="mydiv" style="display:none">
<table>
<tr><th>Date</th><th>Link</th></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
<tr><td>2010-04-20 10:26:01</td></td></tr>
</table>
</div>

And if you'd like to toggle the iFrame itself, use Justus' approach on the iFrame's id.

function toggle(div)
{
    var element = $('iframe').contents().find('#'+div);

    if( $(element).is(":visible") == false)
       $(element).show();
    else
       $(element).hide();
}