Как показать и обновить скрытый элемент div, наведя курсор на одну из трех кнопок в Javascript? ⇐ Html

[Anonymous]

Я хочу навести курсор на кнопки и показать под ними скрытый элемент div/панель с помощью JavaScript. Мой JavaScript включен извне и работает нормально. Я пытаюсь использовать модель DOM для изменения стиля и внутреннего HTML элемента div, но это не работает. Это мой код HTML, JavaScript и CSS ниже. Я даже передаю параметры, чтобы проверить, какая кнопка была наведена, но не удалось.

Код: Выделить всё

function hidepanel() {
var panel = document.getElementsByClassName("hidden");
panel.style.display = none;
}

function updatepanel(x) {
var desc1 = "Get fully customized workout programs from our dedicated fitness experts.";
var desc2 = "Nutrional advice and diet plans just for your needs!";
var desc3 = "Our very own state-of-the-art line of supplementations.Click to Order";

if (x == 1) {
document.getElementsByClassName('hidden').style.display = 'block';
document.getElementsByClassName('hidden').innerHTML = 'desc1';
}
if (x == 2) {
document.getElementsByClassName('hidden').style.display = 'block';
document.getElementsByClassName('hidden').innerHTML = 'desc2';
}
if (x == 3) {
document.getElementsByClassName('hidden').style.display = 'block';
document.getElementsByClassName('hidden').innerHTML = 'desc3';
}
}

Код: Выделить всё

.hidden {
display: none;
}

Код: Выделить всё

[url=#]Workout Programs[/url]


[url=#] Diet Plans[/url]


[url=#] Food Supplements[/url]

Я также пытался изменить функциональность, изменив функцию для работы с onClick вместо onmousehover, но это не сработало. Пожалуйста, помогите мне, я сильно ударился головой.