JavaScript - Mostrar el contenido de un div cuando se pinche en un botón

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por alex (7 intervenciones) el 01/06/2018 20:04:52

Como se puede hacer con javascript o jQuery que cuando pinche en un botón me muestre el contenido de un div, aunque se repita varias veces la misma estructura, solo muestre en el que hago clic. Article se repite tantas veces como registros tenga en la base de datos.

Ejemplo:

<article>

     <div (DIV CONTENEDOR INFORMACION)>

           <div (DIV CONTENEDOR BOTON)>

                <a class=“btn”(ESTE SERIA EL BOTON)></a>

           </div>

     </div>

    <div class=“mostrar" (ESTE SERIA EL DIV A MOSTRAR)>

    </div>

</article>

La estructura que tengo en HTML es igual a la que te muestro arriba, aunque aquí la he simplificado.

Yo consigo que funcione, pero el problema es que muestra todos los que tengo, si hay 2, 3, 50, 100 etc…

Necesitaría que solo mostrara en el que solo hago clic.

Javascript que uso:

$('.btn').click(function () {

    $(‘.mostrar').fadeIn();

});

Un saludo

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por xve (2100 intervenciones) el 02/06/2018 14:06:38

Hola Alex, mucho coidado con las comillas, estas utilizando diferentes tipos ...

Aquí un simple ejemplo con JavaScript:

<style>

#mostrar {display:none;}

</style>

<article>

     <div>

           <div>

                <span id="btn">pulsa</span>

           </div>

     </div>

    <div id="mostrar">

        ......................

    </div>

</article>

<script>

document.getElementById("btn").addEventListener("click", function() {

    document.getElementById("mostrar").style.display="block";

});

</script>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por alex (7 intervenciones) el 02/06/2018 15:29:57

Hola xve,

Muchas gracias por tu ayuda.

Me funciona genial, el problema es que el código html (article) esta dentro de un (while) en php con conexión a la base de datos, entonces cuando hay muchos (article) y hago click en el botón del primero me va genial, pero cuando lo hago en los demás, no me funciona.

Valora esta respuesta

Comentar

Pos: 47

Val: 39

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por Lopez (9 intervenciones) el 02/06/2018 16:56:22

Alex,

Eso sea posiblemente porque el ejemplo que xve nos dejó, usa el método getElementById.
Veras, el id debe ser único, entonces imagino actualmente todos los elementos article comparten el mismo id,
y es por ello el comportamiento que describes.

Prueba reemplazar getElementById por getElementsByClassName() para tener el resultado deseado.
Un pelo mas de info aquí: https://developer.mozilla.org/es/docs/Web/API/Document/getElementsByClassName.

Yo con Jquery, que es veo lo que usabas al inicio de tu post, lo haría así:

HTML

<div class="toggleme">

    <h2>H 1</h2>  <button type="button">Click!</button>

    <article class="hidden" style="display:none">

        <p>paragraph 1</p>

    </article>

</div>

<div class="toggleme">

    <h2>H 2</h2 ><button type="button">Click!</button>

    <article class="hidden" style="display:none">

        <p>paragraph 2</p>

    </article>

</div>

$(document).ready(function(){

  $("h2,button").click(function(){

    var daparent=$(this).parent();

    $(".hidden", daparent).each(function(){

        $(this).toggle();

});

});

});

Espero sirva,
Saludos!

Valora esta respuesta

Comentar

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por alex (7 intervenciones) el 02/06/2018 18:13:38

Hola Lopez,

Muchas gracias por tu ayuda.

Pero aun no me funciona, al igual con la estructura que tu has montado en HTML si que funciona, pero la mía es distinta. Mi estructura HTML es tal cual la escribí en mi primer post.

No entiendo mucho de Javascript ni de jquery, pero creo que tu haces mención a (parent), en mi estructura no son parientes, ni hijos ya que el boton esta dentro de 2 div y el contenido a mostrar esta fuera de estos 2 div.

Un saludo

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por xve (2100 intervenciones) el 02/06/2018 18:17:13

Hola Alex, el problema es que no tenemos claro como es la estructura de tu HTML... cada iteración es un <article>?

Estaría bien que nos mostraras el código HTML exacto con dos o mas botones.

Valora esta respuesta

Comentar

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por alex (7 intervenciones) el 02/06/2018 18:24:10

<article class="gradient-content">

  <div class="gradient-container-color">

       <div class="gradient-color" style="background: #000;"></div>

  </div>

  <div class="gradient-container-information">

    <div class="gradient-title">

        <span class="gradient-number">1</span>

        <span class="gradiente-name">Pruebas</span>

    </div>

    <div class="gradient-buttom">

      <a id="btn-open" class="btn-text" href="javascript:void(0);">

          <span class="icon-svg">

            <svg class="fill-svg" viewBox="0 0 320 512">

                 <use xlink:href="#icon-color"/>

            </svg>

          </span>

      </a>

    </div>

  </div>

  <div id="cnt" class="_gn896" style="background: #000;">

      <div class="_gn900">

          <h1 class="color-text" style="background: #000; -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Prueba</h1>

          <a id="btn-close" href="javascript:void(0);">X</a>

      </div>

  </div>

</article>

Esto seria un while, el funcionamiento seria que cuando clicke en la id="btn_open" se habra el div con la id="cnt" y que cuando clicke en la X se oculte el div id="cnt"

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por xve (2100 intervenciones) el 02/06/2018 18:35:22

Haber si es esto lo que buscas...

<style>

.mostrar {display:none;}

</style>

<article>

     <div>

           <div>

                <span class="btn">pulsa</span>

           </div>

     </div>

    <div class="mostrar">

        ......................

    </div>

</article>

<article>

     <div>

           <div>

                <span class="btn">pulsa</span>

           </div>

     </div>

    <div class="mostrar">

        ......................

    </div>

</article>

<script>

var botones=document.querySelectorAll(".btn");

botones.forEach(function(boton) {

    boton.addEventListener("click", pulsado, false);

});

function pulsado(e) {

    this.closest("article").children[1].style.display="block";

</script>

Valora esta respuesta

Comentar

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por alex (7 intervenciones) el 02/06/2018 18:53:54

Muchas gracias.

Ya lo he conseguido con este codigo. Solo he tenido que cambiar el numero 1 por el 2 y ya lo aplica al div que yo necesitaba.

Ahora mirare de pulirlo para que haga la animación FadeIn.

<script>

var botones=document.querySelectorAll(".btn");

botones.forEach(function(boton) {

    boton.addEventListener("click", pulsado, false);

});

function pulsado(e) {

    this.closest("article").children[1].style.display="block";

</script>

Valora esta respuesta

Comentar

Pos: 47

Val: 39

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por Lopez (9 intervenciones) el 02/06/2018 18:28:04

Bueno Alex,
Echarle un poco de ganas, que solo debías cambiar las etiquetas.

<article class="toggleme">

    <h2>H 1</h2>  <button type="button">Click!</button>

    <div class="hidden" style="display:none">

        <p>paragraph 1</p>

    </div>

</article>

<article class="toggleme">

    <h2>H 2</h2 ><button type="button">Click!</button>

    <div class="hidden" style="display:none">

        <p>paragraph 2</p>

    </div>

</article>

Si te fijas el elemento que contendrá el contenido oculto, que deseas mostrar lleva la clase "hidden".
El elemento que disparara la visibilidad, en jquery esta fijado como un h2 o button, puedes añadir mas,
y el elemento que contiene a cada uno, lleva la clase "toggleme".

Usamos clases, para poder actuar sobre múltiples elementos.

Saludos!

Valora esta respuesta

Comentar

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por alex (7 intervenciones) el 02/06/2018 18:33:58

He cambiado las etiquetas y no hay manera.

Valora esta respuesta

-2

Comentar

Pos: 47

Val: 39

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por Lopez (9 intervenciones) el 02/06/2018 18:46:27

Alex,

El tema es que no estas anidando, por eso te dejamos un ejemplo simple que debias tratar de entender y adaptar.
Aquí te resolvimos el problema:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<article class="gradient-content toggleme">

          <div class="gradient-container-color">

               <div class="gradient-color" style="background: #000;"></div>

          </div>

          <div  class=" gradient-container-information">

            <div class="gradient-title">

                        <span class="gradient-number">1</span>

                        <span class="gradiente-name">Pruebas</span>

            </div>

<div class="hidden"><!-- AÑADO UN DIV QUE SEA PADRE DEL CONTENIDO A OCULTAR -->

            <div class="gradient-buttom">

              <a id="btn-open" class="btn-text" href="javascript:void(0);">

                  <span class="icon-svg">

                        <svg class="fill-svg" viewBox="0 0 320 512">

                             <use xlink:href="#icon-color"/>

                        </svg>

                  </span>

              </a>

            </div>

          </div>

          <div id="cnt" class="_gn896" style="background: #000;">

              <div class="_gn900">

                  <h1 class="color-text" style="background: #000; -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Prueba</h1>

                  <a id="btn-close" href="javascript:void(0);">X</a>

              </div>

          </div>

</div>

        </article>

<article class="gradient-content toggleme">

          <div class="gradient-container-color">

               <div class="gradient-color" style="background: #000;"></div>

          </div>

          <div  class=" gradient-container-information">

            <div class="gradient-title">

                        <span class="gradient-number">1</span>

                        <span class="gradiente-name">Pruebas</span>

            </div>

<div class="hidden"><!-- AÑADO UN DIV QUE SEA PADRE DEL CONTENIDO A OCULTAR -->

            <div class="gradient-buttom">

              <a id="btn-open" class="btn-text" href="javascript:void(0);">

                  <span class="icon-svg">

                        <svg class="fill-svg" viewBox="0 0 320 512">

                             <use xlink:href="#icon-color"/>

                        </svg>

                  </span>

              </a>

            </div>

          </div>

          <div id="cnt" class="_gn896" style="background: #000;">

              <div class="_gn900">

                  <h1 class="color-text" style="background: #000; -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Prueba</h1>

                  <a id="btn-close" href="javascript:void(0);">X</a>

              </div>

          </div>

</div>

        </article>

Te recomiendo le des un vistazo a :

Algo nuevo que aprender cada día :)
Saludos!

Valora esta respuesta

Comentar

Mostrar el contenido de un div cuando se pinche en un botón

Publicado por alex (7 intervenciones) el 02/06/2018 19:10:16

Sii, cada dia se aprende algo.

Muchas gracias por la ayuda.

Valora esta respuesta

Comentar

DIsplay none dependiendo del valor de un select al cargar la pagina

Mostrar/Ocultar secciones según Formulario