Button show div 1 and hide div 2 and vise versa

Question

Button show div 1 and hide div 2 and vise versa

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

I want to make a single button that changes its name and hides div1 and shows div2 .

The button would have the name div1 when it was showing div1 and the same default for div2 .

    function mostrar_abas(obj) {

     document.getElementById('div_aba1').style.display="none";
      document.getElementById('div_aba2').style.display="none";

   switch (obj.id) {
      case 'mostra_aba1':
      document.getElementById('div_aba1').style.display="block";
      break
      case 'mostra_aba2':
      document.getElementById('div_aba2').style.display="block";
      break
   }
}

<a href="#" onclick="mostrar_abas(this);" id="mostra_aba1" >Mostra Aba 1</a> |
<a href="#" onclick="mostrar_abas(this);" id="mostra_aba2" >Mostra Aba 2</a> 
<p></p>
<!-- abas -->
<div id="div_aba1" style="display:none;">
Conteúdo da aba 1
</div>
<div id="div_aba2" style="display:none;">
Conteúdo da aba 2
</div>

javascript html

asked by anonymous 15.09.2016 / 01:28

2 answers

2

Try a JavaScript so

<script type="text/javascript">
function fechar_abrir(objeto) {
    if (document.getElementById(objeto).style.display == "none") {
        document.getElementById(objeto).style.display = "block";
    } else {
        document.getElementById(objeto).style.display = "none";
    }
}
</script>

The implementation would be something like this (with my code), in the first div , the id that is inside the fechar_abrir() function must be the same as the div that you want to display or not.

echo '<div class="div_menu" onclick="fechar_abrir(\'menu_cliente\')" title="Clientes">'.
     '<img alt="Clientes" src="http://www.'.$_SESSION['p_url'].'img/users.png"align="left" />'.'Clientes</div>
        <div class="div_item" id="menu_cliente" style="display:none;">'.$menu.'</div>';

15.09.2016 / 01:45

Result automatic calculation javascript asp.net mvc [duplicate] How to "concatenate" JavaScript functions?

score 2 · Accepted Answer

I made two options, run the codes below and see it working.

Option 1: to do this by using the text button property:

function mostrar_abas(obj) {
   document.getElementById('div_aba1').style.display="none";
   document.getElementById('div_aba2').style.display="none";
  
  if(obj.text === 'Mostra Aba 1'){
      document.getElementById('div_aba1').style.display="block";
      obj.text = 'Mostra Aba 2';
  }else{
      document.getElementById('div_aba2').style.display="block";
      obj.text = 'Mostra Aba 1';
  }
}

<a href="#" onclick="mostrar_abas(this);">Mostra Aba 1</a> 
<p></p>
<!-- abas -->
<div id="div_aba1" style="display:none;">
Conteúdo da aba 1
</div>
<div id="div_aba2" style="display:none;">
Conteúdo da aba 2
</div>

Option 2: to do this by using the css.display property of the tab:

function mostrar_abas(obj) {
   
  if(document.getElementById('div_aba1').style.display==="none"){
      document.getElementById('div_aba2').style.display="none";
      document.getElementById('div_aba1').style.display="block";
      obj.text = 'Mostra Aba 2';
  }else{
    document.getElementById('div_aba1').style.display="none";
    document.getElementById('div_aba2').style.display="block";
      obj.text = 'Mostra Aba 1';
  }
}

<a href="#" onclick="mostrar_abas(this);">Mostra Aba 1</a> 
<p></p>
<!-- abas -->
<div id="div_aba1" style="display:none;">
Conteúdo da aba 1
</div>
<div id="div_aba2" style="display:none;">
Conteúdo da aba 2
</div>

Option 3: already starting visible:

function mostrar_abas(obj) {
   
  if(document.getElementById('div_aba1').style.display==="none"){
      document.getElementById('div_aba2').style.display="none";
      document.getElementById('div_aba1').style.display="block";
      obj.text = 'Mostra Aba 2';
  }else{
    document.getElementById('div_aba1').style.display="none";
    document.getElementById('div_aba2').style.display="block";
      obj.text = 'Mostra Aba 1';
  }
}

<a href="#" onclick="mostrar_abas(this);">Mostra Aba 2</a> 
<p></p>
<!-- abas -->
<div id="div_aba1">
Conteúdo da aba 1
</div>
<div id="div_aba2" style="display:none;">
Conteúdo da aba 2
</div>