Puedes hacer lo que deseas agregando al evento clic de todos los botones una llamada a tu función de la siguiente manera:
/* Tu función */
function openFunctions() {
var div = document.getElementById("functions");
div.classList.toggle("block");
}
/* Esperamos a que el DOM esté cargado */
document.addEventListener("DOMContentLoaded", (event) => {
/* Agregamos tu función al evento clic de todos los botones */
document.querySelectorAll('button').forEach((boton) => {
boton.addEventListener('click', openFunctions);
});
});
#functions {
margin-top: 20px;
background-color: #eee;
display: none;
}
#functions button {
display: block;
}
.block {
display: block !important;
}
<button>Abrir y cerrar</button>
<div id="functions">
<button>Funcion 1</button>
<button>Funcion 2</button>
<button>Funcion 3</button>
</div>
He hecho uso de querySelectorAll()
para buscar todos los botones a los que deseamos agregar la función. Si quieres agregarla únicamente a los botones que están bajo #functions
entonces el selector sería, por ejemplo, #functions button
.
Con Array.forEach()
itero uno a uno los resultados de la búsqueda realizada.
El método addEventListener()
agrega una llamada a la función especificada cuando se genere el evento del primer parámetro.
En el caso de los botones el evento click
es el primer parámetro y el segundo es el nombre de la función que hemos creado anteriormente.
En el caso de document
espero al evento DOMContentLoaded
y en este caso, en vez de proporcionar el nombre de una función como segundo parámetro, la genero en línea usando el formato de función reducida indicando (parámetros) => {contenido de la función}
.