-1

So to be quick and to the point, I'm attempting to create a small vertical menu on the left side of my screen where when you click on an item in the list, it changes all the contents of a div to the right of it, the 'content' section but without changing the physical html file. Meaning, I'd like to keep it all as one document and do it with JavaScript as I've seen used before.

Here's a 'mock-up' of what I'd like to do:

diagram of what the intent is

EDIT/UPDATE

Alright so I've found a solution that works, but I've got 2 things I want to change with it and I'm not sure how.

          function toggle_visibility(id) {
                 var e = document.getElementById(id);
                 if(e.style.display == 'block')
                        e.style.display = 'none';
                 else
                        e.style.display = 'block';
            }

I want to add the following:

  1. Only one can display at a time
  2. Some sort of 'slide' animation for changing 'screens'

Here's an example currently on how the links work:

<a onclick="toggle_visibility('2');">Testing</a>

<div style="display:none;" id="2">
testing for page 2
</div>
FirstOrderKylo
  • 99
  • 3
  • 12

2 Answers2

2

Vanilla JavaScript is good enough for this

document.querySelectorAll('nav a')
  .forEach(e => e.addEventListener('click', _ => change(e.dataset.id)))


function change(n) {
  let panels = document.querySelectorAll('main div')
  panels.forEach(p => p.classList.remove('active'))
  panels[n - 1].classList.add('active')
}
.container {
  display: flex;
}
nav {
  display: flex;
  flex-direction: column;
  margin-right: 50px;
  background-color: seagreen;
  cursor: pointer;
}
nav a {
  padding: 10px;
}
nav a:hover {
  background-color: gold;
  display: block;
}
main div {
  display: none;
  padding: 20px;
}
.active {
  display: block;
}
<div class="container">

  <nav>
    <a data-id="1">Item 1</a>
    <a data-id="2">Item 2</a>
    <a data-id="3">Item 3</a>
  </nav>
  <main>
    <div class="active">Item 1 Content</div>
    <div>Item 2 Content</div>
    <div>Item 3 Content</div>
  </main>

</div>
marzelin
  • 10,790
  • 2
  • 30
  • 49
  • I can just for whatever reason not get this to work. Should I update the post with the code I've got using your answer? – FirstOrderKylo Sep 09 '16 at 20:00
  • Alright well to test it in general I made a new simple html page and literally copy and pasted your code into it, the CSS, Java, and HTML letter for letter and it still won't work. It displays Item 1 but when I click on the others it wont switch to them. Ideas? – FirstOrderKylo Sep 09 '16 at 20:05
0

The above code snippet is fine; it's just that the JavaScript needs to be moved to the end of the HTML. See here: document.querySelector doesn't work in .js file This is the simplest and best example of this on the Internet, so let's look at the full answer to save time for others viewing this post.

<html>
<head>

<style>

.container {
  display: flex;
}
nav {
  display: flex;
  flex-direction: column;
  margin-right: 50px;
  background-color: seagreen;
  cursor: pointer;
}
nav a {
  padding: 10px;
}
nav a:hover {
  background-color: gold;
  display: block;
}
main div {
  display: none;
  padding: 20px;
}
.active {
  display: block;
}

</style>
</head>

<body>    
<div class="container">    
  <nav>
    <a data-id="1">Item 1</a>
    <a data-id="2">Item 2</a>
    <a data-id="3">Item 3</a>
  </nav>
  <main>
    <div class="active">Item 1 Content</div>
    <div>Item 2 Content</div>
    <div>Item 3 Content</div>
  </main>

</div>    

 <script type="text/javascript">    
/*jshint esversion: 6 */
document.querySelectorAll('nav a')
.forEach(e => e.addEventListener('click', _ => change(e.dataset.id)));    

function change(n) {
  let panels = document.querySelectorAll('main div');
  panels.forEach(p => p.classList.remove('active'));
  panels[n - 1].classList.add('active');
}    
</script>

</body>
</html>
Charlesdwm
  • 71
  • 5