Afficher/Masquer à l'aide de jquery

J'ai du mal à me cacher et à afficher la balise p. Quelqu'un pourrait m'aider avec ce code. Qu'est-ce que je suis en essayant d'accomplir est que lorsque vous cliquez sur le bouton cacher, le contenu est caché. Ensuite, lorsque vous êtes prêt à afficher le contenu, cliquez sur le bouton Afficher. Je sais que vous pouvez utilise la bascule, mais je ne veux pas le faireAfficher/Masquer à l'aide de jquery

<!DOCTYPE html> <!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(value){ 
    $("button").click(function(value){ 
    if (value==="hide"){ 
     $("p").hide();} 
    else 
      $("p").show(); 
    }); 
}); 
</script> 
</head> 

<body> 
<h2>This is a heading</h2> 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button value="hide">Hide me</button> 
<button value="show">Show me</button> 
</body> 
</html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(value){ 
    $("button").click(function(value){ 
    if (value==="hide"){ 
     $("p").hide();} 
    else 
      $("p").show(); 
    }); 
}); 
</script> 
</head> 

<body> 
<h2>This is a heading</h2> 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button value="hide">Hide me</button> 
<button value="show">Show me</button> 
</body> 
</html>

Source

2010-12-09 user244394

Vous ne pouvez pas avoir plusieurs ' ID avec le même nom. Utilisez plutôt 'class's à la place. –

@patrick - ID non uniques EST Balisage HTML non valide. –

@Charles - Oui, une distinction était implicite que je n'avais pas l'intention. J'aurais dû indiquer le balisage invalide en plus de ce que Karim79 avait déjà signalé. À savoir fermer les balises HTML avec '}' au lieu de '>'. – user113716

Actuellement, il ne fonctionne pas avec de multiples contenus .

En effet, vous avez des ID en double sur votre page. Pour résoudre ce problème, les classes d'utilisation, et cibler la prochaine div .slickbox de l'ancre cliquée:

$('a.slick-toggle').click(function() { 
    $(this).next("div").find(".slickbox").toggle(400); 
    return false; 
});

..et modifier les ID des classes, par exemple:

<a class="slick-toggle" href="#">Toggle the box</a> 
<div style="position:relative; outline: 1px dashed orange; padding:100px;"> 
    <div class="slickbox" style=" outline: 1px dashed hotpink; background-color:#ccc;position:absolute; top:100px; left: 20px;"> 
     <h2> music nsme</h2> 
     <p>This is the box that will be shown and hidden and togg </p> 
    </div> 
</div>

Source

2010-12-09 20:53:16 karim79

Un peu difficile à dire avec la condition du balisage, mais je pense que chaque 'slickbox' est un enfant de la prochaine' div' sobling à chaque 'slick-toggle'. – user113716

@patrick dw - Je pense que vous avez raison. J'ai mis à jour ma réponse pour réfléchir. Merci :) – karim79

karim79: De rien, bien que le code HTML que vous avez fourni ne reflète pas votre solution correcte de code js. J'espère que cela ne vous dérange pas que je l'ai mis à jour. – user113716

Répondre

Questions connexes