Javascript / HTML - Toggle Visibility (Автоматическое скрытие одного элемента div, когда другой становится видимым)

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

Моя проблема заключается в следующем: Предположим, домашняя страница, при первом посещении веб-сайт пуст (как я хочу). Допустим, вы нажимаете ссылку «о нас». Внезапно раздел о нас становится видимым (таким, каким я хочу его видеть). Теперь проблема, с которой я столкнулся, заключается в том, что когда я знаю, скажем, щелкнув ссылку «продукты», я хочу, чтобы контент «продукты» стал видимым, а контент «о нас» снова стал невидимым. (По сути, создается иллюзия открытия новой страницы на той же странице)

Вот код, который я придумал до сих пор. Я могу сделать определенные элементы div видимыми и невидимыми (onclick), но я не могу понять, как сделать так, чтобы в любой момент времени был виден только один элемент div.

<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
    document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>

<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
    document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>

Ссылки, позволяющие заставить работать javascript, выглядят следующим образом:

< href = "#" onclick = "toggleVisibility ();"> О

Продукты