Show or hide a div via button and JavaScript

Question

I need hide a div opening a webpage (display is set on "none"), but clicking on a button the div has to appear. I'd like to know why the code works until I declare css styles into each div: if I define css in a style block into the head (commented below) and remove style tag from each div, the JavaScript looks almost death.

<!DOCTYPE html>
<HTML lang="it">
<HEAD>
<TITLE>Prova visualizzazione div via button</TITLE>
<meta charset="UTF-8" />
<script>
	function apriMenu() {
		var idTag;
		idTag = document.getElementById("appari").style;
		if (idTag.display == "none") {
			idTag.display = "block";
			idTag.top = document.getElementById("header").style.height + "px";
		} else if (idTag.display == "block") {
			idTag.display = "none";
		}
	}
</script>
<!-- <style type="text/css">
	header {
		width: 100%;
		background-color: #22ffff;
		height: 40px;
	}
	#appari {
		width: 49%;
		background-color: #ff22ff;
		height: auto;
		display: none;
	}
</style> -->
</HEAD>

<body>
<header id="header" style="width: 100%;
		background-color: #22ffff;
		height: 40px;">
	Questo è l'header<br />
	<div id="side">
		<button onClick="javascript:apriMenu();">Clicca</button>
	</div>
</header>
<div id="appari" style="width: 49%;
		background-color: #ff22ff;
		height: auto;
		display: none;">
	Questo è il div appari
</div>
</body>
</html>

Chiller · Accepted Answer · 2018-06-22 17:47:40Z

element.style only gets inline styles, what you are looking for is the computedStyle

So there for you need to use window.getComputedStyle()

See code sample:

function apriMenu() {
  var idTag;
  idTag = document.getElementById("appari");
  var displayStyle = window.getComputedStyle(idTag).display;

  if (displayStyle === "none") {
    idTag.style.display = "block";
    idTag.top = document.getElementById("header").style.height + "px";
  } else if (displayStyle === "block") {
    idTag.style.display = "none";
  }
}

header {
  width: 100%;
  background-color: #22ffff;
  height: 40px;
}

#appari {
  width: 49%;
  background-color: #ff22ff;
  height: auto;
  display: none;
}

<header id="header">
  Questo è l'header<br />
  <div id="side">
    <button onClick="javascript:apriMenu();">Clicca</button>
  </div>
</header>
<div id="appari">
  Questo è il div appari
</div>

lehmanad1 · Accepted Answer · 2018-06-22 17:50:56Z

0

Without digging into it too deeply, you could just add a final else statement to show the element if style.display is empty. Just use the reverse case if you want the element to be shown initially.

function apriMenu() {
    var idTag;
    idTag = document.getElementById("appari").style;
    if (idTag.display == "none") {
        idTag.display = "block";
        idTag.top = document.getElementById("header").style.height + "px";
    } else if (idTag.display == "block") {
        idTag.display = "none";
    }
    else{
        idTag.display = "block";
        idTag.top = document.getElementById("header").style.height + "px";
    }
}

answered Jun 22, 2018 at 17:50

lehmanad1

1915 bronze badges

Comments

Joseph Sjoblom · Accepted Answer · 2018-06-22 17:54:15Z

0

Here's another simpler way to achieve the same thing: http://next.plnkr.co/edit/ZsAKiwxVA3riRx5Y?open=lib%2Fscript.js

function toggleMenu() {
   var element = document.getElementById("appari");
   element.classList.toggle("showMenu");
}

You basically just need to toggle a class on and off to hide/show the menu. I've found using a class to do so is quite simple.

Good luck!

answered Jun 22, 2018 at 17:54

Joseph Sjoblom

17112 bronze badges

Collectives™ on Stack Overflow

Show or hide a div via button and JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related