Bom, precisei fazer com que ao clicar em um botão mostrasse as div's e se ao clicar em outro botão e a alguma div estiver aparecendo(display:block;) iria adquirir um display: none; foi o que fiz no código a baixo:
function movel(){
var divMovel = document.getElementById("divMovel");
if(divMovel.style.display == "none" || divRoupa.style.display == "block" || divOutros.style.display == "block" || divCozinha.style.display == "block"){
divMovel.style.display = "block";
divRoupa.style.display = "none";
divOutros.style.display = "none";
divCozinha.style.display = "none";
}
else{
divMovel.style.display = "none";
}
};
function roupa(){
var divRoupa = document.getElementById("divRoupa");
if(divRoupa.style.display == "none" || divMovel.style.display == "block" || divOutros.style.display == "block" || divCozinha.style.display == "block" ){
divMovel.style.display = "none";
divOutros.style.display = "none";
divCozinha.style.display = "none";
divRoupa.style.display = "block";
}
else{
divRoupa.style.display = "none";
}
};
function outros(){
var divOutros = document.getElementById("divOutros");
if(divOutros.style.display == "none" || divRoupa.style.display == "block" || divMovel.style.display == "block" || divCozinha.style.display == "block" ){
divRoupa.style.display = "none";
divMovel.style.display = "none";
divCozinha.style.display = "none";
divOutros.style.display = "block";
}
else{
divOutros.style.display = "none";
}
};
function cozinha(){
var divCozinha = document.getElementById("divCozinha");
if(divCozinha.style.display == "none" || divRoupa.style.display == "block" || divMovel.style.display == "block" || divOutros.style.display == "block"){
divRoupa.style.display = "none";
divMovel.style.display = "none";
divOutros.style.display = "none";
divCozinha.style.display = "block";
}
else{
divCozinha.style.display = "none";
}
};
.itens{
position: relative;
margin: auto;
width: 80%;
height: 600px;
background-color: white;
}
.moveis{
position: relative;
margin: auto;
width: 80%;
height: 600px;
background-color: green;
display: none;
}
.roupa{
position: relative;
margin: auto;
width: 80%;
height: 600px;
background-color: blue;
display: none;
}
.outros{
position: relative;
margin: auto;
width: 80%;
height: 600px;
background-color: red;
display: none;
}
.cozinha{
position: relative;
margin: auto;
width: 80%;
height: 600px;
background-color: black;
display: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="boxGeral">
<aside class="classes">
<ul>
<!--Os botões -->
<li><button id="linkMovel" onclick="movel()">Móveis</button></li>
<li><button id="linkRoupa" onclick="roupa()">Roupas</button></li>
<li><button id="linkOutros" onclick="outros()">Outros</button></li>
<li><button id="linkCozinha" onclick="cozinha()">Itens de Cozinha</button></li>
</ul>
</aside>
<!--As div que irão aparecer -->
<article class="itens">
<div class="moveis" id="divMovel">
asdasdasd
</div>
<div class="roupa" id="divRoupa">
333333
</div>
<div class="outros" id="divOutros">
333333
</div>
<div class="cozinha" id="divCozinha">
333333
</div>
</article>
</div>
</body>
</html>
Porém por algum motivo o script só é executado quando se clica duas vezes sobre o botão, quero saber a solução que fará com que seja aparecido assim quando clicar.
OBS: Utilizando somente HTML, CSS e JS(Sem jQuery).Se possível mostrar também uma solução com jQuery utilizando algum efeito como o toggle. Agradecido.