Can you make one element appear and other elements hide on click with JavaScript?

Question

Idea

I want to make website with navigation and I want it to have only one section visible at the time.

Visible section would be displayed when you click on certain button in nav bar.

Problem

I have tried doing this

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

Problem I'm having with this code is I can't check which button was clicked and determine which sections should get display:none;

I'm not even sure if this can be done and I can't imagine how would I do this.

I'm new to JavaScript and I need help, thanks in advance.

Start by reading [about events](https://developer.mozilla.org/en-US/docs/Web/API/Event). — Teemu, Feb 09 '18 at 17:50
`$(document).ready(function` suggests that you're using jQuery, but `document.getElementById(#showElement).style.display= "block";` suggests that you don't know what you're doing. — j08691, Feb 09 '18 at 17:57
Here's an example of vanilla JavaScript events along the same lines. https://codepen.io/ChaseIngebritson/pen/NyppRZ — Chase Ingebritson, Feb 09 '18 at 18:05

score 1 · Answer 1 · answered Feb 09 '18 at 18:10

Yes, you can achieve this by hiding all the sections and displaying only one that matches your navigation link. Check this example.

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

for (let link of links) {
    link.addEventListener('click', function(e) {
        let 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>

Jacob · Answer 2 · 2018-02-09T17:58:35.297

example of bootstrap

Have you heard of 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>

https://v4-alpha.getbootstrap.com/components/navs/ it can take care of a lot of what you want. I think you want tabs with dropdowns

Thanks, but i know how to work with bootstrap im having an issue with JavaScript — neca, Feb 09 '18 at 17:57

score 0 · Answer 3 · answered Feb 09 '18 at 17:57

Here's an example of how to show and hide elements on button click. In my example I am toggling between hiding and showing 2 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>Here is some content in div 1</p>
</div>
<div id="div2">
  <p>Here is some content in div 2</p>
</div>
<input id="toggleBtn" type="button" value="Toggle Divs" />

Can you make one element appear and other elements hide on click with JavaScript?

3 Answers3