如何使用javascript显示/隐藏多个div？

Question

Me and my collegues are working on a project where we make a website to show people our study. We have 1 page with many descriptions on some subjects. There are 6 in total. systeembiologie, proteomics, genomics, transcriptomics, epigenomics and metabolomics. All of these subjects are explained in a seperate div. Our page is really long right now and we would like to have a function when the page starts with htese divs hidden, then you can click on a any of these words and the corresponding div opens, if another of these words is clicked then the original div will close and the new one will open. None of us have any experience in javascript and cant seem to figure out how to do this. If anybody could help us, that would be amazing.

Answer 1

Here's a quick fix. I'm sure you'll be able to copy the other topics in HTML yourself.

 const links = [...document.getElementsByTagName("a")]; const topics = [...document.getElementsByClassName("topic")]; links.map((link) => link.addEventListener("click", function() { topics.map((topic) => topic.style.display = "none"); const selected = link.text; document.getElementById(selected).style.display = "inline-block"; }));

 * { box-sizing: border-box; } html { font-size: 62.5%; } a { text-decoration: none; color: black; } nav ul { list-style: none; padding: 20px; display: flex; align-content: center; justify-content: space-between; background-color: lightblue; font-size: 1.4rem; } .topic { display: none; }

 <div class="page"> <nav> <ul> <li><a href="#">systeembiologie</a></li> <li><a href="#">proteomics</a></li> <li><a href="#">genomics</a></li> <li><a href="#">transcriptomics</a></li> <li><a href="#">epigenomics</a></li> <li><a href="#">metabolomics</a></li> </ul> </nav> <div id="systeembiologie" class="topic"> <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> <div id="proteomics" class="topic"> <div class="description">Viverra orci sagittis eu volutpat. Tellus in metus vulputate eu scelerisque felis. Tristique et egestas quis ipsum suspendisse ultrices. Vitae semper quis lectus nulla at volutpat. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Urna condimentum mattis pellentesque id nibh. Ac tortor vitae purus faucibus ornare suspendisse. Gravida arcu ac tortor dignissim convallis. Platea dictumst vestibulum rhoncus est. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. Ultrices in iaculis nunc sed augue lacus.</div> </div> </div>