1

Hola buenas soy novato y estoy perdidisimo con esto. Necesito que cuando hago onclick para mostrar el "precio2" se me oculte a su vez el #precio1. Me funciona el accionador para mostrar el "precio2" pero no consigo que esto haga que se oculte el "precio1", creo que estoy usando mal el hide y show. Seguro que hay varias formas de hacerlo sencillo y en una sola función, espero que podáis ayudarme. Gracias!

<script type="text/javascript">
	function show(bloq) {
	 obj = document.getElementById(bloq);
	 obj.style.display = (obj.style.display=='none') ? 'block' : 'none';
}

</script>

<script>
	if ($('#precio2').is(':show'))
	$('#precio1').show();
	else
	$('#precio1').hide();

</script>
<div class="show" id="precio1"><p>100€</p></div>
<div style="display:none;" id="precio2"><p>200€</p></div>
						
<div><a onclick="show('precio2')"> Accionador</a></div>

3 respuestas 3

4

Podrias hacer uso del toggle de jquery para ocultar o mostrar un divu otro.

Ademas si vas a adjuntar un evento es mejor si lo haces de la misma forma, por eso use el click de jquery en lugar de onclick en el html.

Recuerda agregar la libreria de jquery en tu codigo

$("#accionar").click(function(){
  
  $('#precio1').toggle();
  $('#precio2').toggle();   
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div class="show" id="precio1"><p>100€</p></div>
<div style="display:none;" id="precio2"><p>200€</p></div>
						
<div><a id="accionar"> Accionador</a></div>

9
  • He probado ambas opciones copiando tal cual y en los dos casos consigo mostrar el precio 2 pero esto no hace ocultarse el precio 1. ¿Porque puede ser?
    – Diego
    Commented el 7 abr. 2016 a las 13:06
  • si habilitas el developer tools del browser, al cual accedes con F12, puedes ver en la solapa Console si hay algun error de javascript ? la verdad es raro que no funcione ya que la implementacion que puse la puedes probar desde aqui mismo y esta respondiendo. Recordaste agregar la libreria jquery ? Commented el 7 abr. 2016 a las 13:10
  • Es verdad! El codigo funciona, he creado un archivo y hace justo lo que quiero, sin embargo cuando lo integro en mi pagina no. Voy a revisar. Gracias!
    – Diego
    Commented el 7 abr. 2016 a las 13:20
  • Increible! el error viene del archivo "bootstrap.min.css", si elimino este enlace del archivo funciona. Pero... claro, no puedo eliminar a este archivo completo, se te ocurre de donde puede venir el error o si hay alguna forma de solucionarlo? Estoy trabajando con la versión 3.3.6 de bootstrap.
    – Diego
    Commented el 7 abr. 2016 a las 13:45
  • que dice el mensaje de error ? en que parte del html lo marca. Incluiste el .js de bootstrap? Commented el 7 abr. 2016 a las 13:47
2

Excelente día, después de varios días o semanas le pregunté a mi maestro de programación cómo podía hacer que al tener varios botones ejecutara el mismo script en una sola hoja la misma función de ocultar divs y apareciera el div respectivo a su botón, pues está más fácil de lo que pensaba, haciendo un switch statement.
https://www.w3schools.com/js/js_switch.asp
Básicamente es lo siguiente.

switch(expression) {
case n:
    code block
    break;
case n:
    code block
    break;
default:
        code block
}

Entonces lo que hice fué esto:

function myFunction(idButton) {
  var producto1 = document.getElementById('producto1');
  var producto2 = document.getElementById('producto2');
  var producto3 = document.getElementById('producto3');



 switch(idButton) {
 case 1:

          producto1.style.display = 'block';
          producto2.style.display = 'none';
          producto3.style.display = 'none';
    break;

 case 2:
          producto1.style.display = 'none';
          producto2.style.display = 'block';
          producto3.style.display = 'none';
    break;

 case 3:
          producto1.style.display = 'none';
          producto2.style.display = 'none';
          producto3.style.display = 'block';
    break;

default:
          alert("hay un problema: No existe el producto.")
        }

   }

Donde el número que contiene "case" es el id que se le asigna al botón onclick en html.

<li onclick="myFunction(1)">Producto1</li>
<li onclick="myFunction(2)">Producto2</li>
<li onclick="myFunction(3)">Producto3</li>

los de aquí arriba serían los botones yo quice hacerlo con li

<div id="producto1" style="display:none;">
   <div class="tituloDiv">
      <h3>Producto1</h3>
   </div>
   <div class="contenidoDiv">
      <p>Descripción producto1.</p>
   </div>
</div>

<div id="producto2" style="display:none;">
     <div class="tituloDiv">
        <h3>Producto1</h3>
     </div>
     <div class="contenidoDiv">
        <p>Descripción producto2.</p>
     </div>
</div>

<div id="producto3" style="display:none;">
    <div class="tituloDiv">
         <h3>Producto1</h3>
    </div>
    <div class="contenidoDiv">
        <p>Descripción producto3.</p>
    </div>
</div>

Saludos c:

0

Puedes crear una función para cambiar el estado de los div:

function cambiaVisibilidad() {
       var div1 = document.getElementById('precio1');
       var div2 = document.getElementById('precio2');
       if(div2.style.display == 'block'){
           div2.style.display = 'none';
           div1.style.display = 'block';
       }else{
          div2.style.display = 'block';
          div1.style.display = 'none';
         }
   }
  <html>

<body>

 <div class="show" id="precio1"><p>100€</p></div>
 <div style="display:none;" id="precio2"><p>200€</p></div>
 <div onclick="cambiaVisibilidad()"><a id="accionar">Accionador</a>                 </div>

</body>
</html>

4
  • Hola Elenasys, gracias por tu respuesta. La he probado y consigo mostrar el precio 2 pero sin ocultar el precio 1...¿porque puede ser?
    – Diego
    Commented el 7 abr. 2016 a las 13:15
  • hola Diego, que raro, si ejecutas el botón "Ejecutar Fragmento de código" no funciona? :0 yo lo ve funcionando!
    – Jorgesys
    Commented el 7 abr. 2016 a las 13:25
  • 1
    Si, si. Funciona perfecto perdona. Es cuando lo inserto en mi página cuando deja de funcionar, no tengo ni idea de porque. Tendre algun error o algo que le pueda estar afectando, voy a revisarlo. Muchas gracias!
    – Diego
    Commented el 7 abr. 2016 a las 13:28
  • jeje, ok Diego.
    – Jorgesys
    Commented el 7 abr. 2016 a las 13:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.