Autor Tema: Como ocultar dinámico un texto cuando se muestra otro texto JavaScript ó jQuery (Leído 6549 veces)

SoCu · « **en:** 28 de Febrero 2017, 15:29 »

Hola, tengo el siguiente código que me muestra un texto al pulsar sobre un enlace, pero si pulso sobre otro enlace sigue mostrando el texto anterior.

Que código tengo que poner para que si pulso otro enlace oculte el texto que se este mostrando, o si el código que hay que poner es mas fácil hacerlo para que al pulsar pulsar cualquier enlace oculte todos los textos tambien me sirve.

Este es el codigo con el que muestro el contenido de un enlace:

Código: [Seleccionar]

<html>
<head>
<script>
function mostrar(id) {
  obj = document.getElementById(id);
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>

</head>
<body>
<a href="#" onclick="mostrar('divTexto1'); return false" />Mostrar/Ocultar contenido UNO</a>
<div id="divTexto1" style="visibility:hidden">
Texto 1
</div>
<BR>

<a href="#" onclick="mostrar('divTexto2'); return false" />Mostrar/Ocultar contenido DOS</a>
<div id="divTexto2" style="visibility:hidden">
Texto 2</div>
<BR>

<a href="#" onclick="mostrar('divTexto3'); return false" />Mostrar/Ocultar contenido TRES</a>
<div id="divTexto3" style="visibility:hidden">
Texto 3
</div>
<BR>

<a href="#" onclick="mostrar('divTexto4'); return false" />Mostrar/Ocultar contenido CUATRO</a>
<div id="divTexto4" style="visibility:hidden">
Texto 4</div>
<BR>


<a href="#" onclick="mostrar('divTexto5'); return false" />Mostrar/Ocultar contenido CINCO</a>
<div id="divTexto5" style="visibility:hidden">
Texto 5
</div>
<BR>

<a href="#" onclick="mostrar('divTexto6'); return false" />Mostrar/Ocultar contenido SEIS</a>
<div id="divTexto6" style="visibility:hidden">
Texto 6
</div>
<BR>

<a href="#" onclick="mostrar('divTexto7'); return false" />Mostrar/Ocultar contenido SIETE</a>
<div id="divTexto7" style="visibility:hidden">
Texto 7
</div>
<BR>

<a href="#" onclick="mostrar('divTexto8'); return false" />Mostrar/Ocultar contenido OCHO</a>
<div id="divTexto8" style="visibility:hidden">
Texto 8</div>
<BR>

<a href="#" onclick="mostrar('divTexto9'); return false" />Mostrar/Ocultar contenido NUEVE</a>
<div id="divTexto9" style="visibility:hidden">
Texto 9
</div>
<BR>

<a href="#" onclick="mostrar('divTexto10'); return false" />Mostrar/Ocultar contenido DIEZ</a>
<div id="divTexto10" style="visibility:hidden">
Texto 10</div>
<BR>

</div>
</body>
</html>

un saludo.

bermartinv · « **Respuesta #1 en:** 06 de Marzo 2017, 22:49 »

Hola SoCu,
no sé si te refieres a esto.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    a{
      display:block;
      text-decoration:none;
    }
    #divTexto1{
      position:absolute;
      top:20%;
      left:30%;
      font-size:5em;
      text-shadow: 2px 2px  10px grey;
      text-decoration:underline;
      visibility:hidden
    }
  </style>
</head>
<body>
<a href="#" title='presiona para mostrar/desaparecer'>Mostrar/Ocultar contenido UNO</a>
<a href="#" title='presiona para mostrar/desaparecer'>Hola que tal</a>
<a href="#" title='presiona para mostrar/desaparecer'>Hi, folks! </a>
<div id="divTexto1" >
Texto 1
</div>
<script>

(function autoEjecutable(){
  var obj = document.getElementsByTagName('a'); // elementos que son enlace
  var elemento = document.getElementById('divTexto1'); // donde escribimos texto
  var valor = true; // contador para par o impar

for(var i=0; i< obj.length; i++) {
       obj[i].addEventListener("click", bindClick());
 }

 function bindClick() {
    return function(){
      if (valor == false){
          elemento.style.visibility = 'hidden';
          valor = true;
          }else{
        elemento.style.visibility = 'visible';
          valor = false;
           };
   };
}

})();

</script>
</body>
</html>

SoCu · « **Respuesta #2 en:** 10 de Marzo 2017, 18:45 »

Hola bermartinv, perdona que no te respondiese antes, pensaba que nadie había comentado nada en el post porque no he recibido ninguna notificación de nuevas respuestas.

No es eso exactamente, aparece el mismo texto para los tres botones, el texto es diferente para cada botón.

Por ejemplo, poner oculto unos números a cada nombre:

Juan
1111111

Pedro
2222222

Antonio
3333333

Solo se ven los nombres, y cuando pulse en Juan me muestra sus números, si vuelvo a pulsar en Juan los ocultaría.
Pero también si pulso en Juan me muestra los numero, y si luego pulso en Pedro me mostraría los números de Pedro y a la vez ocultaría los de Juan.

Salu2

SoCu · « **Respuesta #3 en:** 12 de Marzo 2017, 13:01 »

Bueno ya lo he podido hacer, dejo el código por si le puede servir a alguien que como yo no este muy puesto.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Mostrar Div y Ocultar Otro</title>
	<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
	</head>
<body>
<div class="container-fluid">
  <div class="row">

      <!-- INFORAMCION 1  -->
      <div class="col-sm-4 col-xs well">
        <a href="#info1" class="inf">Block 1</a>
      </div>
      <div id="info1" class="col-xs-12 well oculto">
        <p>Texto 1</p>
      </div>

      <!-- INFORAMCION 2  -->
      <div class="col-sm-4 col-xs well">
        <a href="#info2" class="inf">Block 2</a>
      </div>
      <div id="info2" class="col-xs-12 well oculto">
        <p>Texto 2</p>
      </div>

      <!-- INFORAMCION 3  -->
      <div class="col-sm-4 col-xs well">
      <a href="#info3" class="inf">Block 3</a>
      </div>
      <div id="info3" class="col-xs-12 well oculto">
      <p>Texto 3</p>
      </div>
  </div>
</div>
<script type="text/javascript">
	jQuery(document).ready(function(){
  $(".oculto").hide();              
    $(".inf").click(function(){
          var nodo = $(this).attr("href");  
 
          if ($(nodo).is(":visible")){
               $(nodo).hide();
               return false;
          }else{
        $(".oculto").hide("slow");                             
        $(nodo).fadeToggle("fast");
        return false;
          }
    });
}); 
</script>
</body>
</html>

El texto ira centrado en la pagina, y me gustaría poner el estilo de texto que tu has puesto pero sin ir subrayado, pero al tener el DIV ya un ID como puedo poner ese estilo al texto ?

Salu2.

bermartinv · « **Respuesta #4 en:** 13 de Marzo 2017, 11:36 »

Hola SoCu,
te puse ese código que era lo que había entendido en tu explicación.
He visto tu código que has hecho ahora. Ví que al final lo has hecho con jQuery.
Saludos.

SoCu · « **Respuesta #5 en:** 13 de Marzo 2017, 12:54 »

Hola bermartinv, si pero como comento al final del post anterior, igual como esta después del código no lo has llegado a ver, lo que quiero es poner el mismo texto o estilo de texto que tu has puesto en tu ejemplo, pero en el codigo que yo he puesto no se como poner para que salta el mismo.

Un saludo.

bermartinv · « **Respuesta #6 en:** 13 de Marzo 2017, 23:11 »

Adjunto código para que le eches un vistazo.
A este tipo de funciones se le llama CLOSURES ( y cuesta al principio un poco de verlo)
https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=854:closures-javascript-ejemplos-concepto-que-son-y-para-que-sirven-retardar-ejecucion-settimeout-cu01169e-&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    a{
      display:block;
      text-decoration:none;
    }

  .desaparecer{
	display : none;

		}
  .aparecer{
	display: block;
      font-size:5em;
      text-shadow: 2px 2px  10px grey;
      text-decoration:underline;
		}
  </style>
</head>
<body>
<a href="#" title='presiona para mostrar/desaparecer'>Mostrar/Ocultar contenido UNO</a>
<p class='desaparecer'> Aquí estamos </p>
<a href="#" title='presiona para mostrar/desaparecer'>Hola que tal</a>
<p class='desaparecer'> Aquí estamos </p>
<a href="#" title='presiona para mostrar/desaparecer'>Hi, folks! </a>
<p class='desaparecer'> Aquí estamos </p>
<script>

(function autoEjecutable(){
  var obj = document.getElementsByTagName('a'); // elementos que son enlace

for(var i=0; i< obj.length; i++) {
       obj[i].addEventListener("click", bindClick());
 }

 function bindClick() {
	 var valor = true;
		return function(){
    if (valor==true){
			this.nextElementSibling.removeAttribute('class','desaparecer');
			this.nextElementSibling.setAttribute('class','aparecer');
				valor = false;
		}else{
			this.nextElementSibling.removeAttribute('class','aparecer');
			this.nextElementSibling.setAttribute('class','desaparecer');
			valor = true;
		};
	};
}

})();

</script>
</body>
</html>

Saludos

SoCu · « **Respuesta #7 en:** 14 de Marzo 2017, 14:35 »

Gracais bermartinv, mira ya lo he conseguido, no he visto la modificación que hiciste en el post para poner el código porque no me llego notificación, solo llego cuando colocaste el link a esa pagina.

De todas formas me copie ese código por si puedo utilizarlo, ya que en este caso el funcionamiento no llega a ser el que estoy buscando.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Textos</title>
	<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
      <style type="text/css">
        a{
              display:block;
              text-decoration:none;
            }
      	body {  
      	      background-color: white;
      	      background-image: url(fondo.jpg);
      	      background-size: cover;
      	      background-repeat: no-repeat;  
      	      background-attachment: fixed; 
      	    }
        .texto1{
          font-size:70px; 
          text-shadow: 2px 2px  10px black, 0 0 0 white, 0 0 0.2em grey; color: black;
          margin-top: 0px;
          margin-bottom: 0px;
            }
        .texto2{
          font-size:50px; 
          text-shadow: 2px 2px  10px black, 0 0 0 white, 0 0 0.2em grey; color: Red;
          margin-top: 0px;
          margin-bottom: 0px;
            }
    </style>
  
	</head>
<body>
<center>

<div class="container-fluid">
  <div class="row">
          <p>
          <p>
          <div class="col-sm-4 col-xs well">
            <a href="#info1" class="inf">Pulsa para mostrar texto 1</a>
          </div>
          <div id="info1" class="col-xs-12 well oculto">
            <p class="texto1">Texto 1</p>
            <p class="texto2">Texto 1</p>
          </div>
          <p>
          <p>
          <div class="col-sm-4 col-xs well">
            <a href="#info2" class="inf">Pulsa para mostrar texto 2</a>
          </div>
          <div id="info2" class="col-xs-12 well oculto">
            <p class="texto1">Texto 2</p>
            <p class="texto2">Texto 2</p>
          </div>
          <p>
          <p>
          <div class="col-sm-4 col-xs well">
          <a href="#info3" class="inf">Pulsa para mostrar texto 3</a>
          </div>
          <div id="info3" class="col-xs-12 well oculto">
            <p class="texto1">Texto 3</p>
          </div>
          <p>
          <p>
          <div class="col-sm-4 col-xs well">
          <a href="#info4" class="inf">Pulsa para mostrar texto 4</a>
          </div>
          <div id="info4" class="col-xs-12 well oculto">
            <p class="texto2">Texto 4</p>
          </div>
  </div>
</div>
</center>

<script type="text/javascript">
	jQuery(document).ready(function(){
  $(".oculto").hide();              
    $(".inf").click(function(){
          var nodo = $(this).attr("href");  
 
          if ($(nodo).is(":visible")){
               $(nodo).hide();
               return false;
          }else{
        $(".oculto").hide("slow");                             
        $(nodo).fadeToggle("fast");
        return false;
          }
    });
}); 
</script>

</body>
</html>

bermartinv · « **Respuesta #8 en:** 14 de Marzo 2017, 16:22 »

Me alegro que hayas conseguido lo que buscabas.
En mi código no solo se puede ver un texto, cada texto va independiente de los demás y da igual que esté visible uno u otros, son independientes.
Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Como ocultar dinámico un texto cuando se muestra otro texto JavaScript ó jQuery (Leído 6549 veces)

SoCu

Como ocultar dinámico un texto cuando se muestra otro texto JavaScript ó jQuery

bermartinv

Re:Como oculta texto cuando se muestra otro texto

SoCu

Re:Como oculta texto cuando se muestra otro texto

SoCu

Re:Como oculta texto cuando se muestra otro texto

bermartinv

Re:Como oculta texto cuando se muestra otro texto

SoCu

Re:Como oculta texto cuando se muestra otro texto

bermartinv

Re:Como oculta texto cuando se muestra otro texto

SoCu

Re:Como oculta texto cuando se muestra otro texto

bermartinv

Re:Como oculta texto cuando se muestra otro texto

Preguntas y respuestas