Show different contents when selecting one of the buttons

Question

How can I make div change when pressing a button? in case I have 3 buttons, the first one will cause the first one to be displayed div, the second with which the second div appears and the third cause the third div.

Something like what it does, but it can only appear one at a time if the div 1, which is the one that keeps appearing by default, appear, 2 and 3 cannot be displayed.

$( "#Clique1" ).click(function() {
  $("#opcao1").css("display","block");
});
$( "#Clique2" ).click(function() {
  $("#opcao2").css("display","block");
});
$( "#Clique3" ).click(function() {
  $("#opcao3").css("display","block");
});

#opcao2{
    display:none;
}
#opcao3{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="opcao1">
    Eu apareço
</div>
<div id="opcao2">
    Eu irei aparecer se ele sumir
</div>
<div id="opcao3">
    Eu também irei aparecer se ele sumir
</div>
<button id="Clique">troca para a opcao1</button>
<button id="Clique2">troca para a opcao2</button>
<button id="Clique3">troca para a opcao3</button>

http://jsfiddle.net/fjfe3v4g/

Answer 1

With Html5 came the date attributes. I think you should take advantage of this, I changed the html a little:

$('.opcao:gt(0)').hide();
$('[data-opt]').on('click', function() {
  var optId = $(this).data('opt');
  $('.opcao').hide();
  $(optId).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="opcao" id="opcao1">
    Eu apareço
</div>
<div class="opcao" id="opcao2">
    Eu irei aparecer se ele sumir
</div>
<div class="opcao" id="opcao3">
    Eu também irei aparecer se ele sumir
</div>
<button data-opt="#opcao1" id="Clique">troca para a opcao1</button>
<button data-opt="#opcao2" id="Clique2">troca para a opcao2</button>
<button data-opt="#opcao3" id="Clique3">troca para a opcao3</button>

Not that instead of the first line $('.opcao:gt(0)').hide();, can add in css: #opcao2, #opcao3: {display: none;}

Answer 2

You can leave display:none for the others in each click:

$( "#Clique1" ).click(function() {
  $("#opcao1").css("display","block");
  $("#opcao2").css("display","none");
  $("#opcao3").css("display","none");
});
$( "#Clique2" ).click(function() {
  $("#opcao1").css("display","none");
  $("#opcao2").css("display","block");
  $("#opcao3").css("display","none");
});
$( "#Clique3" ).click(function() {
  $("#opcao1").css("display","none");
  $("#opcao2").css("display","none");
  $("#opcao3").css("display","block");
});

#opcao2{
    display:none;
}
#opcao3{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="opcao1">
    Eu apareço
</div>
<div id="opcao2">
    Eu irei aparecer se ele sumir
</div>
<div id="opcao3">
    Eu também irei aparecer se ele sumir
</div>
<button id="Clique">troca para a opcao1</button>
<button id="Clique2">troca para a opcao2</button>
<button id="Clique3">troca para a opcao3</button>

Answer 3

One of the wonders of CSS or jquery selectors, is that they can be grouped together, and this serves to avoid code repetition unnecessarily.

Particularly I prefer to always work with classes, but below follows a way to select several different Ids with a simple selector:

$("[data-target]").click(function() {
  $("[id^=opcao]").hide(); // ocultar todos os IDs iniciados por opcao
  $($(this).data('target')).show(); // exibir o elemento indicado no atributo data-target
});

#opcao2,
#opcao3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="opcao1">
  Eu apareço
</div>
<div id="opcao2">
  Eu irei aparecer se ele sumir
</div>
<div id="opcao3">
  Eu também irei aparecer se ele sumir
</div>
<button data-target="#opcao1">troca para a opcao1</button>
<button data-target="#opcao2">troca para a opcao2</button>
<button data-target="#opcao3">troca para a opcao3</button>