jquery to click and make appear/disappear different Ivs

Question

I need to make sure that when clicking on the menu item, a div linked to this item appears on the screen, if I click on another menu item, the previous div disappears and the new div appears... in the photo below to get an idea of what I need:

When I click on GOALKEEPERS for example, will disappear the div that contains the images of DEFENSE and will appear the div with the images of goalkeepers.

Answer 1

I saw you tag jQuery, but this result is quite similar using only CSS:

#time { width: 100%; height: 150px;
  overflow: hidden; text-align: center;
  background-color: #005500; }

.jogadores { width: 100%; height: 150px; }

.jogadores h3{ color: #FFF; }

#menu { width: 100%; text-align: center;
  background-color: #004500; }

#menu ul{ margin: 0; }

#menu li { display: inline-block; padding: 10px; }

#menu a { text-decoration: none; color: #FFF; }

<div id="time">
  <div id="goleiros" class="jogadores"><h3>Goleiros</h3></div>
  <div id="defesa" class="jogadores"><h3>Defesa</h3></div>
  <div id="laterais" class="jogadores"><h3>Laterais</h3></div>
</div>
<div id="menu">
  <ul>
    <li><a href="#goleiros">Goleiros</a></li>
    <li><a href="#defesa">Defesa</a></li>
    <li><a href="#laterais">Laterais</a></li>
  </ul>
</div>

The idea in this code was to put the div of players with the same size of div that they are inside, the overflow: hidden is for that displays a div each time and that only shows the other div when click on the menu link that is pointing to the id of each.

The rest is up to you.

Answer 2

From what I understand the code below can solve your problem, of course you should change some things, but the essence is this. I hope I’ve helped. HTML

<button onclick="showataque()">Ataque</button>

<div id="ataque">
   <h1>ATAQUE</h1>
</div>

<button onclick="showdefesa()">Defesa</button>

<div id="defesa">
  <h1>DEFESA</h1>
</div>

CSS

#ataque {
display: none;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
#defesa {
display: none;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}

Javascript

function showataque() {
   var x = document.getElementById('ataque');
      if (x.style.display === 'none') {
          x.style.display = 'block';
      } else {
          x.style.display = 'none';
      }
}

function showdefesa() {
   var y = document.getElementById('defesa');
      if (y.style.display === 'none') {
          y.style.display = 'block';
      } else {
          y.style.display = 'none';
      }
}

Answer 3

Take this example, I think that’s about what you want!

function mostraDiv(caller) {
        if (caller.id === 'goleiros') {
            $("#divGoleiros").attr("style", "display: block");
            $("#divDefesa").attr("style", "display: none");
            $("#divLaterais").attr("style", "display: none");
            $("#divVolantes").attr("style", "display: none");
        } else if (caller.id === 'defesa') {
            $("#divGoleiros").attr("style", "display: none");
            $("#divDefesa").attr("style", "display: block");
            $("#divLaterais").attr("style", "display: none");
            $("#divVolantes").attr("style", "display: none");
        } else if (caller.id === 'laterais') {
            $("#divGoleiros").attr("style", "display: none");
            $("#divDefesa").attr("style", "display: none");
            $("#divLaterais").attr("style", "display: block");
            $("#divVolantes").attr("style", "display: none");
        } else if (caller.id === 'volantes') {
            $("#divGoleiros").attr("style", "display: none");
            $("#divDefesa").attr("style", "display: none");
            $("#divLaterais").attr("style", "display: none");
            $("#divVolantes").attr("style", "display: block");
        }
    }

img {
    height: 240px;
}

.navbar {
        overflow: hidden;
        background-color: #333;
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #3e8e41;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    a {cursor: pointer;}
    .navbar a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    .show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
    <a id="goleiros" onclick="mostraDiv(this)">GOLEIROS</a>
    <a id="defesa" onclick="mostraDiv(this)">DEFESA</a>
    <a id="laterais" onclick="mostraDiv(this)">LATERAIS</a>
    <a id="volantes" onclick="mostraDiv(this)">VOLANTES</a>
</div>

<div id="divGoleiros" style="display: none; background-color: red; height: 100%; width: 100%;">
    <center>
      <img src="https://choquereimajestoso.files.wordpress.com/2012/11/goleiro-bruno-palmeiras.jpg" height='auto'> <!-- https://camisa23.files.wordpress.com/2014/06/gj.jpg -->
    </center>
</div>
<div id="divDefesa" style="display: none; background-color: red; height: 100%; width: 100%;">
    <center>
      <img src="https://i.stack.imgur.com/9GQFd.jpg">
    </center>
</div>
<div id="divLaterais" style="display: none; background-color: red; height: 100%; width: 100%;">
    <center>
      <img src="http://jconlineimagem.ne10.uol.com.br/imagem/noticia/2017/06/11/normal/46212346eebee6919fd2fb41c521a744.jpg">
    </center>
</div>
<div id="divVolantes" style="display: none; background-color: red; height: 100%; width: 100%;">
    <center>
      <img src="http://torcedores.uol.com.br/content/uploads/2015/06/palmeiras-adidas-599x400.jpg">
    </center>
</div>

I put the image you provided (without editing) just to give you a sense of what it would look like.

References:

• W3schools - How TO - Clickable Dropdown
• W3schools - How TO - Fixed Menu