I’d be tempted to make it more generic:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Toggle example</title>
<style>
.hidden{
display: none;
}
</style>
</head>
<body>
<a href="#" class="toggle">Click here</a>
<div>Now you see me</div>
<br>
<a href="#" class="toggle">Click here</a>
<div>Now you see me</div>
<br>
<a href="#" class="toggle">Click here</a>
<div>Now you see me</div>
<script>
function toggle(el){
var target = el.nextElementSibling;
if(target.classList.contains("hidden")){
target.classList.remove("hidden");
} else {
target.classList.add("hidden");
}
}
var links = document.querySelectorAll(".toggle");
for (i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(e){
e.preventDefault();
toggle(this);
})
}
</script>
</body>
</html>