Tu pregunta es muy amplia y puede abordarse de diferente manera, para que utilizar Javascript cuando eso lo puedes realizar con CSS te muestro un ejemplo:
1.- Tenemos un div
con la clase contenedores
y dentro hay varios contenedores
<div class="contenedores">
<div class="contenedor1">
SOY EL CONTENEDOR 1
</div>
<div class="contenedor2">
SOY EL CONTENEDOR 2
</div>
<div class="contenedor3">
SOY EL CONTENEDOR 3
</div>
<div class="contenedor4">
SOY EL CONTENEDOR 4
</div>
<div class="contenedor5">
SOY EL CONTENEDOR 5
</div>
<div class="contenedor5">
SOY EL CONTENEDOR 5
</div>
</div>
2.- Con CSS ocultamos todos de la siguiente manera:
.contenedores > div {
display: none;
}
3.- Estamos diciendo que todos los divs
que hay dentro del elemento con la clase contenedores
se oculten
4.- Ahora solo puedes mostrar el que tu desees de la siguiente manera:
.contenedores :nth-child(2) {
display: block;
}
5.- Estamos diciendo que el "hijo" numero 2 del elemento contenedores
se mostrará.
Ejemplo practico de lo anterior planteado:
.contenedores > div {
display: none;
}
.contenedores :nth-child(2) {
display: block;
}
<div class="contenedores">
<div class="contenedor1">
SOY EL CONTENEDOR 1
</div>
<div class="contenedor2">
SOY EL CONTENEDOR 2
</div>
<div class="contenedor3">
SOY EL CONTENEDOR 3
</div>
<div class="contenedor4">
SOY EL CONTENEDOR 4
</div>
<div class="contenedor5">
SOY EL CONTENEDOR 5
</div>
<div class="contenedor5">
SOY EL CONTENEDOR 5
</div>
</div>
6.- **Si lo deseas realizar con JavaScript
// ACCEDEMOS A TODOS LOS CONTENEDORES
let contenedores = document.querySelectorAll(".contenedores>div");
// querySelectorAll NOS DEVUELVE UNA LISTA DE NODOS DE TODOS ESOS CONTENEDORES
// RECORREMOS ESA LISTA Y OCULTAMOS TODOS LOS CONTENEDORES
contenedores.forEach((contenedor) => {
contenedor.style.display = "none";
});
//AHORA SOLO MOSTRAMOS EL CONTENEDOR DESEADO
document.querySelector(".contenedores :nth-child(2)").style.display = "block";
7.- Ejemplo practico con lo anterior planteado:
// ACCEDEMOS A TODOS LOS CONTENEDORES
let contenedores = document.querySelectorAll(".contenedores>div");
// querySelectorAll NOS DEVUELVE UNA LISTA DE NODOS DE TODOS ESOS CONTENEDORES
// RECORREMOS ESA LISTA Y OCULTAMOS TODOS LOS CONTENEDORES
contenedores.forEach((contenedor) => {
contenedor.style.display = "none";
});
//AHORA SOLO MOSTRAMOS EL CONTENEDOR DESEADO
document.querySelector(".contenedores :nth-child(2)").style.display = "block";
<div class="contenedores">
<div class="contenedor1">
SOY EL CONTENEDOR 1
</div>
<div class="contenedor2">
SOY EL CONTENEDOR 2
</div>
<div class="contenedor3">
SOY EL CONTENEDOR 3
</div>
<div class="contenedor4">
SOY EL CONTENEDOR 4
</div>
<div class="contenedor5">
SOY EL CONTENEDOR 5
</div>
<div class="contenedor5">
SOY EL CONTENEDOR 5
</div>
</div>
NOTA: TE DEJO UNOS ENLACES QUE PODRIAN INTERESARTE:
Document.querySelector()
Document.querySelectorAll()