How to hide a div when showing another?

Question

How to hide a div when showing another?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

Hi, I'm good, I'm a rookie and I'm very, very sorry for this. I need that when I do onclick to show the "price2" I hide in turn the # price1. I work the actuator to show the "price2" but I can not get this to hide the "price1", I think I'm using the hide and show wrong. Surely there are several ways to make it simple and in a single function, I hope you can help me. Thanks!

<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>

javascript jquery html5

asked by Diego 07.04.2016 в 03:33

source

3 answers

How to go through a datagridview and add when a code matches? C # Join queries in one, ACCESS

score 2 · Answer 1

You could use the toggle from jquery to hide or show a div or other.

Also if you are going to attach an event it is better if you do it in the same way, so use the click of jquery instead of onclick in the html.

Remember to add the jquery library in your code

$("#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>

score 1 · Answer 2

Excellent day, after several days or weeks I asked my programming master how he could make that having several buttons execute the same script on a single sheet the same function of hiding divs and appearing the respective div to his button, It is easier than I thought, making a switch statement.
link
Basically it is the following.

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

So what I did was this:

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.")
        }

   }

Where the number that contains "case" is the id that is assigned to the onclick button in html.

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

those up here would be the buttons and I would do it with 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>

Greetings c:

score 0 · Answer 3

You can create a function to change the state of the 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>