为什么我必须单击两次按钮才能显示文本？

Question

当使用普通JavaScript单击时，我有两个按钮可显示和隐藏文本。仅在首次加载页面时，才需要单击两次按钮。否则，它无需再次单击即可工作。为什么是这样？我对编程还很陌生，很想解释一下。我试图寻找答案以指导我，但还没有找到任何帮助的方法。

     comando.Parameters.Add(
            "@EmailAddress", SqlDbType.VarChar).Value = EmailAddress;

var $ = function (id) {
	"use strict";
	return window.document.getElementById(id);
};

function hideShowCommuniTea() {
	"use strict";
	if ($('communiteaText').style.display === 'none') {
		$('communiteaText').style.display = 'block';

	} else {
		$('communiteaText').style.display = 'none';

	}
}

function hideShowBenefits() {
	"use strict";
	if ($('moreBenefits').style.display === 'none') {
		$('moreBenefits').style.display = 'block';
	} else {
		$('moreBenefits').style.display = 'none';

	}
}


//HANDLES ALL EVENT LISTENERS
function init() {
	"use strict";
	$('benefitsButton').addEventListener('click', hideShowBenefits);
	$('communitea').addEventListener('click', hideShowCommuniTea);

}
window.addEventListener('load', init);

body{
  font-family: "roboto", sans-serif;
  font-size: 1em;
  width: 100%;
}
nav{
  background-color: teal;
  width: auto;
  height: 50px;

  
}
nav ul{
  list-style: none;
}
li{
  float: left;
  padding: 1em;
  
}
a{
text-decoration: none;
color: white;
}
nav ul li a:hover{
	color: hotpink;
}
header{
  clear: both;
  text-align: center;
  background-color: hotpink;
  border-top: 3px solid #B0FFB0;
  border-bottom: 3px solid #B0FFB0;

}
h1{
color: white;
}
section{
	width: 960px;
	margin: 0 auto;
}

article{
  width: 47%;
  float: left;
  padding: 0 10px 0 10px;
  
}
article p{
	  line-height: 2em;
}
button{
	margin-bottom: 20px;
}
#moreBenefits, #communiteaText{
	display: none;
}
footer{
  clear: both;
  background-color: teal;
  height: 50px;

}
footer p{
  text-align: center;
  padding: 1em;
	color: white;
}