Equivalent Hide and CSS show

Question

The code below does not run on all browsers:

<button id="btn">
    <img class="" 
         src="/img/icone-formation.png" 
         height="100%" 
         width="100%" 
         onclick="document.getElementById('f1').style.display ='initial'; 
                  document.getElementById('f2').style.display ='none';  
                  document.getElementById('f3').style.display ='none'; 
                  document.getElementById('f4').style.display ='none'; 
                  document.getElementById('f5').style.display ='none';
                  document.getElementById('btn').setAttribute('id', 'press');">
</button>

<button id="btn">
    <img class="" 
         src="/img/icone-formation.png" 
         height="100%" 
         width="100%" 
         onclick="document.getElementById('f2').style.display ='initial'; 
                  document.getElementById('f1').style.display ='none';  
                  document.getElementById('f3').style.display ='none'; 
                  document.getElementById('f4').style.display ='none'; 
                  document.getElementById('f5').style.display ='none';
                  document.getElementById('btn').setAttribute('id', 'press');">
</button>

<button id="btn">
    <img  class="" 
          src="/img/icone-formation.png" 
          height="100%" 
          width="100%" 
          onclick="document.getElementById('f3').style.display ='initial'; 
                   document.getElementById('f1').style.display ='none';  
                   document.getElementById('f2').style.display ='none'; 
                   document.getElementById('f4').style.display ='none'; 
                   document.getElementById('f5').style.display ='none';
                   document.getElementById('btn').setAttribute('id', 'press');">
</button>

<button id="btn">
    <img class="" 
         src="/img/icone-formation.png" 
         height="100%" 
         width="100%" 
         onclick="document.getElementById('f5').style.display ='initial'; 
                  document.getElementById('f1').style.display ='none';  
                  document.getElementById('f2').style.display ='none'; 
                  document.getElementById('f3').style.display ='none'; 
                  document.getElementById('f4').style.display ='none';
                  document.getElementById('btn').setAttribute('id', 'press');">
</button>

How can I do the same thing with pure CSS?

Answer 1

HTML + CSS solution

Follow a CSS solution to show only one element at a time. You can test right here:

#cards input {
  display:none;                  /*  Vamos esconder os radiobuttons       */
  position:absolute;             /*  e tirar da tela pra nao aparecer     */
  left:-9000px;                  /*  marca de seleção de texto com mouse  */
}

#cards div {
  display:none;                  /*   As divs sao escondidas por padrao   */
  background:#fc9;
  float:left;
  width:50px;
  height:50px;
}

#cards input:checked + div {     /* Se existir um input selecionado a div */
  display:block;                 /* imediatamente seguinte (A+B) aparece  */
}

#buttons {
  clear:both;
}

#buttons label {
  display:block;
  float:left;
  margin:5px;
  padding:2px 20px;
  background:#ccc;
  border:1px inset #eee;
}

<div id="cards">
  <input id="c1" type="radio" name="select" checked="checked"></input><div>1</div>
  <input id="c2" type="radio" name="select"></input><div>2</div>
  <input id="c3" type="radio" name="select"></input><div>3</div>
  <input id="c4" type="radio" name="select"></input><div>4</div>
  <input id="c5" type="radio" name="select"></input><div>5</div>
</div>

<div id="buttons">
  <label for="c1">1</label>      <!--  O "label for" é uma espécie de    -->
  <label for="c2">2</label>      <!--  "controle remoto" do radiobutton  -->
  <label for="c3">3</label>
  <label for="c4">4</label>
  <label for="c5">5</label>
</div>

Of course part of the CSS above is just to "decorate" the example. Important parts are annotated with <!-- /* comments */ -->.

Javascript solution

Using a small function, you can make the code less repetitive:

function showDiv( cDiv ) {
  for(var i=1;i<=5;i++) document.getElementById('f'+i).className = ('f'+i)==cDiv?'show':'';
}

#cards div {display:none}
#cards div.show {display:block}

<div id="cards">
  <div id="f1" class="show">1</div>
  <div id="f2">2</div>
  <div id="f3">3</div>
  <div id="f4">4</div>
  <div id="f5">5</div>
</div>

<button onclick="showDiv('f1');">[imagem]</button>
<button onclick="showDiv('f2');">[imagem]</button>
<button onclick="showDiv('f3');">[imagem]</button>
<button onclick="showDiv('f4');">[imagem]</button>
<button onclick="showDiv('f5');">[imagem]</button>

Answer 2

I believe the best way is to do it with Javascript or using the library jQuery.

Follow an example:

$(document).ready(function() {
  $('.show-hide').on('click', function() {
    var id = this.id;

    $('.divs').hide();
    $('#f' + id).show();
  })
});

.divs {
  display: none;
}
div#f1 {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="show-hide" id="1">DIV 1</button>
<button class="show-hide" id="2">DIV 2</button>
<button class="show-hide" id="3">DIV 3</button>
<button class="show-hide" id="4">DIV 4</button>

<br/>
<br/>
<div class="divs" id="f1">DIV 1</div>
<div class="divs" id="f2">DIV 2</div>
<div class="divs" id="f3">DIV 3</div>
<div class="divs" id="f4">DIV 4</div>