Hay un par de problemas en su código. En primer lugar, la length es una propiedad, no un método, por lo que no necesita el sufijo () para invocarlo. En segundo lugar, no hay un atributo className en HTML. Esto debería ser solo class . Por último, el contenedor principal comparte la misma clase que los elementos que está ocultando, por lo que todos los elementos secundarios se ocultan, incluso si se les ha aplicado un display: block .

Con estos problemas corregidos, su código se vería así:

 function showPanel(id) { var elements = document.getElementsByClassName("panel"); for (let i = 0; i < elements.length; i++) { elements[i].style.display = "none"; } document.getElementById(id).style.display = "block"; }

 <button onclick="showPanel('p1')">test1</button> <button onclick="showPanel('p2')">test2</button> <button onclick="showPanel('p3')">test3</button> <div class="content"> <div id="p1" class="panel"> <p>TEST1</p> </div> <div id="p2" class="panel"> <p class="other">TEST2</p> </div> <div id="p3" class="panel"> <p class="other">TEST3</p> </div> </div>

Sin embargo, vale la pena señalar que el uso de atributos onX está desactualizado y no es una buena práctica. Una mejor solución sería usar controladores de eventos discretos y proporcionar metadatos personalizados al controlador de eventos a través de atributos de data colocados en los elementos.

La versión mejorada de la lógica se vería así:

 let buttons = document.querySelectorAll('button'); let panels = document.querySelectorAll('.panel'); buttons.forEach(button => { button.addEventListener('click', e => { panels.forEach(panel => { panel.style.display = panel.id === e.target.dataset.panel ? 'block' : 'none'; }); }); });

 <button data-panel="1">test1</button> <button data-panel="2">test2</button> <button data-panel="3">test3</button> <div class="content"> <div id="1" class="panel"> <p>TEST1</p> </div> <div id="2" class="panel"> <p class="other">TEST2</p> </div> <div id="3" class="panel"> <p class="other">TEST3</p> </div> </div>

No hay necesidad de JS o Jquery. En lugar de un botón, puede usar una etiqueta de anclaje. Luego llamas con el ancla la identificación del elemento. Por último, pero no menos importante, oculta los cuadros a través de CSS y usa el selector de :target para mostrar los elementos:

 .content { display: none; } .content:target { display: block; }

 <a href="#1">test1</a><br> <a href="#2">test2</a><br> <a href="#3">test3</a><br> <div class="content-container"> <div id="1" class="content"> <p>TEST1</p> </div> <div id="2" class="content"> <p class="other">TEST2</p> </div> <div id="3" class="content "> <p class="other">TEST3</p> </div> </div>

Múltiples problemas.

• La longitud se puede calcular usando elements.length y no elements.length()
• Le ha dado el mismo nombre de clase a los divs padre e hijo. Por lo tanto, ocultar todos los elementos con content de nombre de clase ocultará a sus padres completos. Entonces, después de actualizar style.display = "block" al objetivo requerido, no funcionará. Porque tu padre ya es style.display = "none" . Entonces deberías hacer una actualización lógica allí. Así que cambié el nombre de la clase principal.

 function showPanel(id) { var elements = document.getElementsByClassName("content"); for (let i = 0; i < elements.length; i++) { elements[i].style.display = "none"; } document.getElementById(id).style.display = "block"; }

 <button onclick="showPanel('1')">test1</button> <button onclick="showPanel('2')">test2</button> <button onclick="showPanel('3')">test3</button> <div> <div id="1" class="content"> <p>TEST1</p> </div> <div id="2" class="content"> <p class="other">TEST2</p> </div> <div id="3" class="content "> <p class="other">TEST3</p> </div> </div>