Is it possible to show one element while hiding others upon clicking using JavaScript?

Question

Is it possible to show one element while hiding others upon clicking using JavaScript?

Concept

My idea is to create a website with a navigation menu where only one section is visible at a time. Each section would become visible upon clicking a specific button in the navigation bar.

Challenge

I attempted to achieve this using the following code:

$(document).ready(function show(){
  document.getElementById(#showElement).style.display= "block";
})

The issue I am facing with this code is that I am unable to determine which button was clicked and subsequently identify the sections that should have display:none; applied to them.

Given my limited experience with JavaScript, I am unsure if this task is feasible and how I would go about implementing it.

As someone new to JavaScript, any guidance you can provide would be greatly appreciated. Thank you in advance.

javascript html css web-frontend

Answer 1

Answer №1

Indeed, you have the ability to accomplish this task by concealing all sections except for the one that corresponds with your navigation link. Take a look at this sample code snippet.

const links = document.querySelectorAll("nav a");

for (let link of links) {
    link.addEventListener('click', function(e) {
        const sections = document.getElementsByTagName("section");
        for (let section of sections) {
            if ("#" + section.id === link.getAttribute("href")) {
                section.style.display = "block";
            } else {
                section.style.display = "none";
            }
        }
    });
}

body {margin: 0}
section {
    height: 500px;
    width: 100%;
}
nav {
    position: fixed;
    top:10px;
    left: 20px
}

<nav>
  <a href="#one">one</a> |
  <a href="#two">two</a> |
  <a href="#three">three</a> |
  <a href="#four">four</a>
</nav>
<section id="one" style="background-color: coral"></section>
<section id="two" style="background-color: cyan; display: none"></section>
<section id="three" style="background-color: mediumspringgreen; display: none"></section>
<section id="four" style="background-color: moccasin; display: none"></section>

Answer 2

Indeed, you have the ability to accomplish this task by concealing all sections except for the one that corresponds with your navigation link. Take a look at this sample code snippet.

const links = document.querySelectorAll("nav a");

for (let link of links) {
    link.addEventListener('click', function(e) {
        const sections = document.getElementsByTagName("section");
        for (let section of sections) {
            if ("#" + section.id === link.getAttribute("href")) {
                section.style.display = "block";
            } else {
                section.style.display = "none";
            }
        }
    });
}

body {margin: 0}
section {
    height: 500px;
    width: 100%;
}
nav {
    position: fixed;
    top:10px;
    left: 20px
}

<nav>
  <a href="#one">one</a> |
  <a href="#two">two</a> |
  <a href="#three">three</a> |
  <a href="#four">four</a>
</nav>
<section id="one" style="background-color: coral"></section>
<section id="two" style="background-color: cyan; display: none"></section>
<section id="three" style="background-color: mediumspringgreen; display: none"></section>
<section id="four" style="background-color: moccasin; display: none"></section>

Answer 3

Answer №2

Let me illustrate a method to display and conceal elements with a button click. In this scenario, I am alternating between revealing and hiding two elements:

document.getElementById('toggleBtn').addEventListener('click', toggleDivs);

function toggleDivs() {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');

  if (div1.style.display != 'none') {
    div1.style.display = 'none';
    div2.style.display = 'inline';
  } else {
    div1.style.display = 'inline';
    div2.style.display = 'none';
  }
}

<div id="div1">
  <p>There is some content in div 1</p>
</div>
<div id="div2">
  <p>Here you will find content in div 2</p>
</div>
<input id="toggleBtn" type="button" value="Toggle Divs" />

Answer 4

Let me illustrate a method to display and conceal elements with a button click. In this scenario, I am alternating between revealing and hiding two elements:

document.getElementById('toggleBtn').addEventListener('click', toggleDivs);

function toggleDivs() {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');

  if (div1.style.display != 'none') {
    div1.style.display = 'none';
    div2.style.display = 'inline';
  } else {
    div1.style.display = 'inline';
    div2.style.display = 'none';
  }
}

<div id="div1">
  <p>There is some content in div 1</p>
</div>
<div id="div2">
  <p>Here you will find content in div 2</p>
</div>
<input id="toggleBtn" type="button" value="Toggle Divs" />

Answer 5

Answer №3

check out this example of bootstrap

Are you familiar with bootstrap?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Check out this link for more information on using Bootstrap for tabs and dropdowns it can help you achieve what you are looking for.

Answer 6

check out this example of bootstrap

Are you familiar with bootstrap?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Check out this link for more information on using Bootstrap for tabs and dropdowns it can help you achieve what you are looking for.

Is it possible to show one element while hiding others upon clicking using JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Developing an npm console application that is "installable" similar to tools like yeoman, gulp, or grunt

Disregarding boundaries set by divisions

Error: Attempting to modify a constant value for property 'amount' within object '#<Object>'

Check the validity of the data by logging into another website

Instructions for importing a CSV file into PostgreSQL with Node.js

Having trouble showing the material-ui icon on my navigation menu

Printing a specific column of a particular row in an HTML table to the printer: Tips and tricks

Bootstrap is designed to dynamically adjust to the size of the browser window, ensuring a smooth

``After initialization, the service is unable to retrieve the object as

Web application using HTML5, AJAX, and a manifest file for offline usage

Display your StencilJs component in a separate browser window

Error: The function 'document.getsElementsByClassName()' is not defined when evaluating 'undefined'

Steps for creating a PDF file from an HTML page using JavaScript coding

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

Managing data in React and JavaScript: Clearing fields upon successful sign up and redirecting to login page after receiving a 200 status code

Extracting information from JSON using jQuery

Using Vuejs to display errors with alerts

Intelligent programming and innovative thinking to streamline template diversity

Dealing with the problem of delayed image loading in AngularJS due to a setTimeout conflict

What is the reason behind Google Closure Compiler appending a variable to the global namespace when the original namespace was blank?