<header>
<div> I'm a text ! </div>
<button> Toggle text </button>
</header>
body, html {
margin: 0;
}
header {
width: 100%;
height: 200px;
background: royalblue;
text-align: center;
color: white;
font-size: 33px;
}
div {
margin: 20px;
}
var el = document.querySelector('div');
document.querySelector('button').addEventListener('click', function() {
el.style.display = el.style.display === 'block' ? 'none' : 'block';
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.