Excelente día, después de varios días o semanas le pregunté a mi maestro de programación cómo podía hacer que al tener varios botones ejecutara el mismo script en una sola hoja la misma función de ocultar divs y apareciera el div respectivo a su botón, pues está más fácil de lo que pensaba, haciendo un switch statement.
https://www.w3schools.com/js/js_switch.asp
Básicamente es lo siguiente.
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
code block
}
Entonces lo que hice fué esto:
function myFunction(idButton) {
var producto1 = document.getElementById('producto1');
var producto2 = document.getElementById('producto2');
var producto3 = document.getElementById('producto3');
switch(idButton) {
case 1:
producto1.style.display = 'block';
producto2.style.display = 'none';
producto3.style.display = 'none';
break;
case 2:
producto1.style.display = 'none';
producto2.style.display = 'block';
producto3.style.display = 'none';
break;
case 3:
producto1.style.display = 'none';
producto2.style.display = 'none';
producto3.style.display = 'block';
break;
default:
alert("hay un problema: No existe el producto.")
}
}
Donde el número que contiene "case" es el id que se le asigna al botón onclick en html.
<li onclick="myFunction(1)">Producto1</li>
<li onclick="myFunction(2)">Producto2</li>
<li onclick="myFunction(3)">Producto3</li>
los de aquí arriba serían los botones yo quice hacerlo con li
<div id="producto1" style="display:none;">
<div class="tituloDiv">
<h3>Producto1</h3>
</div>
<div class="contenidoDiv">
<p>Descripción producto1.</p>
</div>
</div>
<div id="producto2" style="display:none;">
<div class="tituloDiv">
<h3>Producto1</h3>
</div>
<div class="contenidoDiv">
<p>Descripción producto2.</p>
</div>
</div>
<div id="producto3" style="display:none;">
<div class="tituloDiv">
<h3>Producto1</h3>
</div>
<div class="contenidoDiv">
<p>Descripción producto3.</p>
</div>
</div>
Saludos c: