mostrar / ocultar utilizando jQuery

StackOverflow https://stackoverflow.com/questions/4402983

  •  25-09-2019
  •  | 
  •  

Pregunta

Tengo problemas para esconderse y que muestra la etiqueta p. Podría alguien ayudarme con este código. Lo que soy tratando de lograr es que cuando hace clic en el botón de ocultación, el contenido está oculto. Luego, cuando esté listo para mostrar el contenido se hace clic en el botón Mostrar. Sé que puedes usos del conmutador pero no quiero hacer eso 

<!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>
¿Fue útil?

Solución

  

En la actualidad no funciona con múltiples   contenido.

Eso es porque tienes ID duplicados en su página. Para solucionar esto, las clases de uso, y apuntar a la siguiente div .slickbox desde el anclaje de clics: 

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

.. y cambiar los identificadores de clases, por ejemplo:. 

<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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top