Ways to display or conceal multiple div elements using JavaScript

A group of colleagues and I are currently collaborating on a project to create a website showcasing our research. We have incorporated 1 page that contains detailed descriptions of six different subjects: system biology, proteomics, genomics, transcriptomics, epigenomics, and metabolomics. Each subject is explained in its own separate div element. Our webpage has become quite lengthy, leading us to consider implementing a function where these div elements are initially hidden. Users would then be able to click on any of the aforementioned words to reveal the corresponding div element. If another word is clicked, the original div will close while the new one opens. Unfortunately, none of us have expertise in JavaScript and we're struggling to find a solution. Any assistance would be greatly appreciated.

javascripthtmlcsshideshow

Answer №1

Here's a simple solution for you. You should be able to replicate similar topics in HTML on your own.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jquery method for clearing input field values

I am facing an issue with the form where the company name field automatically loads a value, even though it is a required field. I simply want to clear the previous loaded value and allow the user to input their information. For example, if I previously e ...

javascriptphpjquerywordpress

What is the best way to distinguish between relative blocks and convert them to absolute positioning?

What is the best way to locate relative blocks and convert them to absolute position while keeping them in the same place? Is this something that can be achieved using JavaScript or jQuery, or is it simply not possible? Thank you very much. ...

javascriptjqueryhtmlcssposition

Tips for creating a cookie for an alternate website upon launching a new browser tab

Hey there, I'm facing an issue that I could really use some help with. To give you some context, I'm working on a project using Angular and TypeScript. My goal is to implement single sign-on functionality for multiple websites within one applica ...

javascriptnode.jsangulartypescriptcookies

Tips for organizing JSON information in ReactJS

Could someone lend a hand with sorting JSON data in ReactJs? I'm having trouble getting it to work properly. Also, if I want to sort by title, would it be the same process? Thanks! This is what I've tried so far: componentDidMount() { ...

javascriptjsonreactjssortingredux

Ensure child elements do not surpass parent size in HTML/CSS/Javascript without altering the children directly

I am intrigued by how iframes neatly encapsulate all site data within a frame and adjust it to fit the size. Is there any method to achieve this functionality in an HTML wrapper? Can the wrapper be configured so that regardless of the content, it is dis ...

javascripthtmlcss

Triggering Jquery event multiple times

I am using a jQuery datatable that gets populated with data from a database through an AJAX call when a user clicks on a load button. The data is displayed based on the date selected by the user in a datepicker. I have also added an export button to allow ...

javascriptajaxdatatables

What is the best way to navigate my Page while my Dialog Component is displayed?

Is there a way to enable scrolling on the background when a dialog component opens up? By default, scrolling is disabled when the dialog appears. How can we allow scrolling in the background? Here is the code snippet: import React, { useState } from &apos ...

cssreactjsmaterial-uimaterial-designstyled-components

Get access to a PDF file by simply clicking a button that has a href link without any URL or file

After successfully simulating a click on the "PDF" link on a webpage, I am trying to save the downloaded PDF file to a specific location. However, I am facing difficulty in retrieving the URL for the PDF using the urllib library. Here is an example of the ...

pythonhtmlpdfselenium-webdriverbeautifulsoup

As the browser window is resized, the HTML div is causing the image to be clipped

Having an issue with the dynamic resizing of Divs containing Images in my HTML Table. The Challenge: The Image within a resizable Div gets clipped at the bottom when the height decreases due to window resizing. To view the problem, visit this Example Pag ...

htmlcssweb

Effortlessly move and release Internet Explorer

Encountering drag and drop issues in Internet Explorer and Safari, while functioning correctly in Firefox 15 (untested on other versions). Dragging and dropping items between dropzones works in Safari, but sorting does not. In Internet Explorer, nothing wo ...

phpjavascripthtmldrag-and-drop

AngularJS Accordion Component: A Handy Tool for Organ

I have been trying to implement an Accordion in my angular project by sending HTML structure from a controller. However, despite following the documentation closely, the Accordion is not displaying as expected. Here is a snippet of the code I am using: v ...

javascriptangularjs

What is the correct way to outline the parameters for deactivating functions?

Request for Assistance! I am facing a challenge with multiple blocks in my WordPress website. Each block contains a checkbox, two select options, and an element that needs to be toggled based on the selected options in the dropdowns. The functionality to ...

javascriptjquery

Drag and drop a Jquery image onto the div with its top left corner

Drop targets: <div id="targetContainer" style="width:100px; height:100px;> <div id="tar_0-0" class="target" style="position: relative; float:left; width:50px; height:50px; background-color: #fff;"></div> <div id="tar_1-0" class="t ...

javascriptjqueryhtmldrag-and-drop

The Datatable feature is malfunctioning, unable to function properly with Javascript and JQuery

As a novice in the world of jquery/javascript, I find myself struggling with what may seem like an obvious issue. Despite following tutorials closely (the code for the problematic section can be found at jsfiddle.net/wqbd6qeL), I am unable to get it to wor ...

javascriptjqueryhtmlcss

Retrieving the input[text] value in TypeScript before trimming any special characters

One of the tasks I am working on involves a form where users can input text that may contain special characters such as \n, \t, and so on. My objective is to replace these special characters and then update the value of the input field accordingl ...

javascriptjquerytypescript

Impose a delay between the execution of two functions in React.js

Looking for a way to introduce a forced delay between two consecutive function calls. Essentially, what I want to achieve is: a // call func a delay(100) // pause for 100 ms b // call func b Is there a method to accomplish this? Update: attempted a() ...

javascriptreactjs

Learn how to eliminate all text characters from a string using jQuery, leaving only the numerical values behind

My webpage features a variety of different products, each with their own values. When trying to calculate the total sum of these products and display it in the shopping cart, I encountered an error displaying NaN. How can I remove this NaN from the strin ...

javascriptjquery

Utilizing a Material UI custom theme in React with Typescript: A step-by-step guide

Upon using the tool , I received a js file and a json file following the paths mentioned on the theme generator page: // src/ui/theme/index.js /* src/ui/theme/theme.json */ The files operate smoothly when left with the .js extension. However, when I attem ...

javascriptreactjstypescriptmaterial-uicreate-react-app

Utilizing CSS grid in a repetitive manner without the need to specify additional grid areas

I'm experimenting with CSS grid to organize content within certain limitations. My goal is to have three divs, each 50% wide, with div two and three stacking next to div one. To accomplish this dynamically using PHP, I utilized grid-template-areas. ...

csscss-grid

Double-click to toggle with jQuery

Here is the code for my toggle menu: $(function () { $('#menu li').click(function () { $('#menu li').removeClass("active"); $(this).toggleClass("active"); }); }) It works perfectly, but there is one issue. When ...

javascriptjquerywordpress