Hide a div by showing another

Navigation
0

I'm making a page that consists of a navigation menu with three buttons, which each open a different (left) side navigation panel (div), which is filled with buttons that each open a div with several images which are shown on the rest of the page.

The first problem is how I get that when I click on one of the main browser buttons, the div (side browser) that is currently open disappears. That is, each button opens its lateral browser and at the same time closes the one that was active to leave the site that we press.

The second problem is the same when you click on one of the buttons on the side div. I need you to close the div (with images) active and open the other one in that position.

So far I have managed to click on a button in the navigation menu to show your div but they stay in block and I need to hide the previous one in some way so that the asset is placed in the previous position (Now they stay according to they are in the html, if I open the last ones to the first one if it does its function, but if it is the opposite, no, and I will be constantly clicking from one to another and it is not plan to be reloading the page.

I've been looking for the form with show / hide for two days but I only find examples where they create a button that discovers or hides a paragraph, and I do not want to have to be giving an extra click every time I change the button they are going to be many: P

I do not know if I've explained myself well but basically it is that when you click on X tag / element you open your div and close the Y to "leave" your site to X.

Any help is welcome, regards.

    
asked by Fco Linares Garcia 13.09.2018 в 07:50
source

2 answers

1

Good morning, I'll give you another example that I hope will serve you. Greetings. 

function init(){
	var x = document.getElementById("primero");
    var y = document.getElementById("segundo");
    var z = document.getElementById("tercero");
    x.style.display = "block";
    y.style.display = "none";
    z.style.display = "none";  

}

function myFunctionB1() {
    var x = document.getElementById("primero");
    var y = document.getElementById("segundo");
    var z = document.getElementById("tercero");
    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none";
        z.style.display = "none";   
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "none";        
    }
    
}

function myFunctionB2() {
    var x = document.getElementById("primero");
    var y = document.getElementById("segundo");
    var z = document.getElementById("tercero");
    if (y.style.display === "none") {
        y.style.display = "block";
        x.style.display = "none";
        z.style.display = "none";  
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "none";        
    }
}

function myFunctionB3() {
    var x = document.getElementById("primero");
    var y = document.getElementById("segundo");
    var z = document.getElementById("tercero");
    if (z.style.display === "none") {
        z.style.display = "block";
        x.style.display = "none";
        y.style.display = "none";
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "none";        
    }
}

init();
#primero{
  background: yellow;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  color: orange;
  font-size: 2rem;

}

#segundo{
	background: red;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  color: orange;
  font-size: 2rem;
}

#tercero{
	background: blue;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  color: orange;
  font-size: 2rem;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Show_Hide</title>
	<link rel="stylesheet" type="text/css" href="css/show_hide.css">
</head>
<body>
	<button type="B1" onclick="myFunctionB1()">Primer div</button>
	<button type="B2" onclick="myFunctionB2()">Segundo div</button>
	<button type="B3" onclick="myFunctionB3()">Tercer div</button>
	<div id="primero">
		Primero
	</div>
	<div id="segundo">
		Segundo
	</div>
	<div id="tercero">
		Tercero
	</div>

	<script src="js/show_hide.js" type="text/javascript" charset="utf-8" async defer></script>

</body>
</html>
    
answered by 13.09.2018 / 09:20
source
0

I leave you a very simple example. It would be necessary to improve the part of the management of button events, for example, but it helps you to see the functionality you are looking for 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="botones">
<button onclick="$('#dos').hide();$('#tres').hide();$('#uno').show();">Uno</button>
<button onclick="$('#uno').hide();$('#tres').hide();$('#dos').show();">Dos</button>
<button onclick="$('#uno').hide();$('#dos').hide();$('#tres').show();">Tres</button>
</div>
<div id="uno" style="width:200px;height:200px;display:none">
<span>Contenido del uno</span>
</div>
<div id="dos" style="width:200px;height:200px;display:none">
<span>Contenido del dos</span>
</div>
<div id="tres" style="width:200px;height:200px;display:none">
<span>Contenido del tres</span>
</div>
    
answered by 13.09.2018 в 08:33
How to get server time with node.js click function stopPropagation