Pelo o que eu entendi o código abaixo pode resolver seu problema, claro que você deverá mudar algumas coisinhas, mas a essência é essa. Espero ter ajudado.
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';
}
}
navbar
, um menu ?