0

I have a page like this on the left side a submenu like this :

<div id="submenu1">Menu 1</div>
<div class="submenu2">Menu 2</div>

on the right I have the content window associated to each of those menu like this

<div id="menuwindo1">Window associated with menu 1</div>
<div id="menuwindo2">Window associated with menu 2</div>

Ma goal is to make that when we click on the Menu 1 div (on the left) it makes the related window appear and when we click on an other menu div it makes tis window appear while making the other disappear.

I honnestly don't know how to do it... some suggestions?

I tried to find it on other post but either the other questions were too specific or the answer given didn't work.

agone07
  • 51
  • 6

1 Answers1

0

I've demonstrated an idea of how you may implement the side submenu navigation bar and main content window and switch the contents on click using jQuery. Hope, it helps.

$(document).ready(function() {
  $("#submenu2").click(function() {
    $("#window1").hide();
    $("#window2").show();
  });
  $("#submenu1").click(function() {
    $("#window2").hide();
    $("#window1").show();
  });
});
.menu-navbar {
  width: 20%;
  height: 100vh;
  background: red;
  float: left;
}

#submenu1,
#submenu2 {
  cursor: pointer;
  background: white;
  border:1px solid black;
}

.window {
  height: 100vh;
  background: gray;
  text-align: center;
}

#window1 {
  background: yellow;
}

#window2 {
  background: green;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-navbar">
  <div id="submenu1">Menu 1</div>
  <div id="submenu2">Menu 2</div>
</div>
<div class="window">
  <div id="window1">Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content
    of submenu1Content of submenu1</div>
  <div id="window2">Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2</div>
</div>