Jquery bascule et montrer

Question

Dans le code ci-dessous, cliquez sur Détails sur le lien div devrait apparaître dans un iframe avec barre de défilement et cliquez sur le lien à nouveau l'iframe et la div ne doit pas show.How de le faire

<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> 

Answer 1

Utilisez la bascule() de jQuery:

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

Que avez-vous besoin pour iframe? Vous pouvez définir l'iframe autour de la div, et utiliser l'option toggle sur l'élément iframe.

Answer 2

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

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

Answer 3

D'accord avec Justus, Vous n'avez généralement pas besoin de l'iFrame, et la fonction bascule fait le travail avec élégance. Si vous aimez toujours utiliser le iFrame, vous pouvez définir son contenu ainsi:

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

un fichier HTML qui ressemble à ceci:

<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> 

Et si vous souhaitez basculer l'iFrame lui-même, utilisez l'approche de Justus sur l'identifiant de l'iFrame.