Button show div 1 and hide div 2 and vise versa

Asked

Viewed 222 times

2

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

The button would have the name div1 while showing the div1 and the same standard 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

2 answers

2


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

Option 1: using the property text button:

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: using the property css.display flap:

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

  • For a div to already start visible just take off the None?

  • Yes, just take the:None display from the HTML tab.

  • Did the above examples work? It worked already getting visible?

  • Remember that to start visible you have to change the initial name of the button. I made a third option and updated in the reply.

  • I was doing some tests and everything worked out, I could understand perfectly now, thank you very much for explaining with 3 options, it became clearer the understanding!!

2

Try a JavaScript thus 

<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, id inside the function fechar_abrir(), needs to be the same as div that you want to show 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>';

  • Allan had already answered, but thank you for your answer too, it would have helped me too

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.